Using insertAdjacentHTML() to add partial HTML
I have a very long text wrapped in a single <p> tag. like this:
<p>
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod...
</p>
I need to break up that text into smaller paragraph chunks by using javascript or jquery to insert </p><p> into certain parts of the text, Effectively ending the last paragraph and then starting a new one (I already have some javascript which identifies where I want to insert the new HTML - that works fine). I've been using insertAdjacentHTML() to add the new paragraph tags:
TheElmToInsertNextTo.insertAdjacentHTML('beforebegin','</p><p>');
The trouble is: the browser tries to fix my partial html and keeps wrapping it in additional <p> tags like this:
<p>
Lorem ipsum dolor
<p></p><p></p>
sit amet consectetur adipiscing elit sed do eiusmod...
</p>
As a result: the extra <p> tags break my pagination script (from easyPaginate) which otherwise works great.
Is there a better way to insert partial HTML without the browser "fixing" it by adding additional <p> tags?
(the issue occurs in both firefox and chrome)
javascript jquery dom dom-manipulation insertadjacenthtml
asked Nov 16 '18 at 0:18
Michael RomrellMichael Romrell
5902923
add a comment |
I have a very long text wrapped in a single <p> tag. like this:
<p>
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod...
</p>
I need to break up that text into smaller paragraph chunks by using javascript or jquery to insert </p><p> into certain parts of the text, Effectively ending the last paragraph and then starting a new one (I already have some javascript which identifies where I want to insert the new HTML - that works fine). I've been using insertAdjacentHTML() to add the new paragraph tags:
TheElmToInsertNextTo.insertAdjacentHTML('beforebegin','</p><p>');
The trouble is: the browser tries to fix my partial html and keeps wrapping it in additional <p> tags like this:
<p>
Lorem ipsum dolor
<p></p><p></p>
sit amet consectetur adipiscing elit sed do eiusmod...
</p>
As a result: the extra <p> tags break my pagination script (from easyPaginate) which otherwise works great.
Is there a better way to insert partial HTML without the browser "fixing" it by adding additional <p> tags?
(the issue occurs in both firefox and chrome)
javascript jquery dom dom-manipulation insertadjacenthtml
asked Nov 16 '18 at 0:18
Michael RomrellMichael Romrell
5902923
1
The HTML has to be converted to DOM elements when you insert it. The DOM can't contain partial elements.
– Barmar
Nov 16 '18 at 1:01
1
Construct everything you want to insert as a string in your loop, then insert the whole thing at the end.
– Barmar
Nov 16 '18 at 1:02
That's helpful. Thank you!
– Michael Romrell
Nov 18 '18 at 6:13
add a comment |
I have a very long text wrapped in a single <p> tag. like this:
<p>
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod...
</p>
I need to break up that text into smaller paragraph chunks by using javascript or jquery to insert </p><p> into certain parts of the text, Effectively ending the last paragraph and then starting a new one (I already have some javascript which identifies where I want to insert the new HTML - that works fine). I've been using insertAdjacentHTML() to add the new paragraph tags:
TheElmToInsertNextTo.insertAdjacentHTML('beforebegin','</p><p>');
The trouble is: the browser tries to fix my partial html and keeps wrapping it in additional <p> tags like this:
<p>
Lorem ipsum dolor
<p></p><p></p>
sit amet consectetur adipiscing elit sed do eiusmod...
</p>
As a result: the extra <p> tags break my pagination script (from easyPaginate) which otherwise works great.
Is there a better way to insert partial HTML without the browser "fixing" it by adding additional <p> tags?
(the issue occurs in both firefox and chrome)
javascript jquery dom dom-manipulation insertadjacenthtml
asked Nov 16 '18 at 0:18
Michael RomrellMichael Romrell
5902923
I have a very long text wrapped in a single <p> tag. like this:
<p>
Lorem ipsum dolor sit amet consectetur adipiscing elit sed do eiusmod...
</p>
I need to break up that text into smaller paragraph chunks by using javascript or jquery to insert </p><p> into certain parts of the text, Effectively ending the last paragraph and then starting a new one (I already have some javascript which identifies where I want to insert the new HTML - that works fine). I've been using insertAdjacentHTML() to add the new paragraph tags:
TheElmToInsertNextTo.insertAdjacentHTML('beforebegin','</p><p>');
The trouble is: the browser tries to fix my partial html and keeps wrapping it in additional <p> tags like this:
<p>
Lorem ipsum dolor
<p></p><p></p>
sit amet consectetur adipiscing elit sed do eiusmod...
</p>
As a result: the extra <p> tags break my pagination script (from easyPaginate) which otherwise works great.
Is there a better way to insert partial HTML without the browser "fixing" it by adding additional <p> tags?
(the issue occurs in both firefox and chrome)
javascript jquery dom dom-manipulation insertadjacenthtml
javascript jquery dom dom-manipulation insertadjacenthtml
asked Nov 16 '18 at 0:18
Michael RomrellMichael Romrell
5902923
asked Nov 16 '18 at 0:18
Michael RomrellMichael Romrell
5902923
asked Nov 16 '18 at 0:18
Michael RomrellMichael Romrell
5902923
asked Nov 16 '18 at 0:18
Michael RomrellMichael Romrell
5902923
asked Nov 16 '18 at 0:18
Michael RomrellMichael Romrell
5902923
5902923
1
The HTML has to be converted to DOM elements when you insert it. The DOM can't contain partial elements.
– Barmar
Nov 16 '18 at 1:01
1
Construct everything you want to insert as a string in your loop, then insert the whole thing at the end.
– Barmar
Nov 16 '18 at 1:02
That's helpful. Thank you!
– Michael Romrell
Nov 18 '18 at 6:13
add a comment |
1
The HTML has to be converted to DOM elements when you insert it. The DOM can't contain partial elements.
– Barmar
Nov 16 '18 at 1:01
1
Construct everything you want to insert as a string in your loop, then insert the whole thing at the end.
– Barmar
Nov 16 '18 at 1:02
That's helpful. Thank you!
– Michael Romrell
Nov 18 '18 at 6:13
1
1
The HTML has to be converted to DOM elements when you insert it. The DOM can't contain partial elements.
– Barmar
Nov 16 '18 at 1:01
The HTML has to be converted to DOM elements when you insert it. The DOM can't contain partial elements.
– Barmar
Nov 16 '18 at 1:01
1
1
Construct everything you want to insert as a string in your loop, then insert the whole thing at the end.
– Barmar
Nov 16 '18 at 1:02
Construct everything you want to insert as a string in your loop, then insert the whole thing at the end.
– Barmar
Nov 16 '18 at 1:02
That's helpful. Thank you!
– Michael Romrell
Nov 18 '18 at 6:13
That's helpful. Thank you!
– Michael Romrell
Nov 18 '18 at 6:13
add a comment |
1 Answer
1
active
oldest
votes
Thanks to @Barmar for pointing out that this can't be done in the order that I initially thought. I fixed this by pre-processing the data on the server side before loading it into the DOM.
answered Nov 27 '18 at 20:46
Michael RomrellMichael Romrell
5902923
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53329681%2fusing-insertadjacenthtml-to-add-partial-html%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Thanks to @Barmar for pointing out that this can't be done in the order that I initially thought. I fixed this by pre-processing the data on the server side before loading it into the DOM.
answered Nov 27 '18 at 20:46
Michael RomrellMichael Romrell
5902923
add a comment |
Thanks to @Barmar for pointing out that this can't be done in the order that I initially thought. I fixed this by pre-processing the data on the server side before loading it into the DOM.
answered Nov 27 '18 at 20:46
Michael RomrellMichael Romrell
5902923
add a comment |
Thanks to @Barmar for pointing out that this can't be done in the order that I initially thought. I fixed this by pre-processing the data on the server side before loading it into the DOM.
answered Nov 27 '18 at 20:46
Michael RomrellMichael Romrell
5902923
Thanks to @Barmar for pointing out that this can't be done in the order that I initially thought. I fixed this by pre-processing the data on the server side before loading it into the DOM.
answered Nov 27 '18 at 20:46
Michael RomrellMichael Romrell
5902923
answered Nov 27 '18 at 20:46
Michael RomrellMichael Romrell
5902923
answered Nov 27 '18 at 20:46
Michael RomrellMichael Romrell
5902923
answered Nov 27 '18 at 20:46
Michael RomrellMichael Romrell
5902923
5902923
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53329681%2fusing-insertadjacenthtml-to-add-partial-html%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
1
The HTML has to be converted to DOM elements when you insert it. The DOM can't contain partial elements.
– Barmar
Nov 16 '18 at 1:01
1
Construct everything you want to insert as a string in your loop, then insert the whole thing at the end.
– Barmar
Nov 16 '18 at 1:02
That's helpful. Thank you!
– Michael Romrell
Nov 18 '18 at 6:13