admin管理员组

文章数量:1434900

I would like to insert a couple of opening DIV tags after the H1 element on a page, without inserting the corresponding closing tags (since the closing tags are contained in an included footer file which I don't have access to).

i.e. Existing code:

<body>
<h1>Heading One</h1>
... page content...
</div>
</div>
</body>

New code:

<body>    
<h1>Heading One</h1>
<div id="foo">  
<div id="baa">  
... page content...
</div>
</div>
</body>

DOM methods insert the div as a plete (closed) element, 'createTextNode' inserts escaped characters and 'innerHTML' needs an element to insert into. Have even tried to insert a script element with document.write without any luck.

Any ideas (jQuery would be fine)?

Update The following worked: 

document.body.innerHTML = document.body.innerHTML.replace('</h1>','</h1><div id="foo"><div id="baa">')

As pointed out by Asad the solution (which now seems obvious of course) is to use string methods on the HTML rather than DOM methods.

I would like to insert a couple of opening DIV tags after the H1 element on a page, without inserting the corresponding closing tags (since the closing tags are contained in an included footer file which I don't have access to).

i.e. Existing code:

<body>
<h1>Heading One</h1>
... page content...
</div>
</div>
</body>

New code:

<body>    
<h1>Heading One</h1>
<div id="foo">  
<div id="baa">  
... page content...
</div>
</div>
</body>

DOM methods insert the div as a plete (closed) element, 'createTextNode' inserts escaped characters and 'innerHTML' needs an element to insert into. Have even tried to insert a script element with document.write without any luck.

Any ideas (jQuery would be fine)?

Update The following worked: 

document.body.innerHTML = document.body.innerHTML.replace('</h1>','</h1><div id="foo"><div id="baa">')

As pointed out by Asad the solution (which now seems obvious of course) is to use string methods on the HTML rather than DOM methods.

  • javascript
  • jquery
  • html
Share Improve this question edited Nov 23, 2012 at 12:21 pelms asked Nov 21, 2012 at 16:18 pelmspelms 1,2521 gold badge12 silver badges21 bronze badges 7
  • @f00bar Won't work -- the browser will automatically close any open tags. This is how the DOM is supposed to work. OP is confusing the DOM with HTML source. – Blazemonger Commented Nov 21, 2012 at 16:20
  • I would try the .html() method with no conviction to insert missing tags – Stphane Commented Nov 21, 2012 at 16:20
  • Try .after() or .append()/.prepend() – banzsh Commented Nov 21, 2012 at 16:21
  • possible duplicate of Paste </p> closing tag without spawning an opening p tag in contenteditable – Blazemonger Commented Nov 21, 2012 at 16:27
  • @banzsh .after() inserts the closing tags and append() inserts inside the h1 ellement rather than following it – pelms Commented Nov 21, 2012 at 16:37
 |  Show 2 more ments

5 Answers 5

Reset to default 3

If you're dealing with DOM manipulation, use DOM manipulation methods. If you're dealing with HTML manipulation, use string manipulation methods.

h1.parentElement.innerHTML = h1.parentElement.innerHTML.replace("<h1>Heading One</h1>","<h1>Heading One</h1><div><div>");

i think this will answer your question, it is all about valid XML formation.

http://www.w3schools./xml/xml_syntax.asp

Forget DOM methods, insert it as a string using .replace().

Your approach is fundamentally wrong. The browser parses the DOM as it sees it, and automatically closes any tags that ought to be closed. It's impossible to use JavaScript to insert only the opening tag.

You say "the closing tags are contained in an included footer file which I don't have access to." Closed tags that haven't been opened are ignored, so as far as the DOM parser is concerned, those closing tags don't exist.

Your solution is either:

  1. Put the opening tags in a header, or somewhere else on the server-side, or
  2. Use JavaScript to grab ALL the following DOM elements, including the footer, and .wrap() them all in the desired divs.

This kind of practice seems a bit unorthodox, but perhaps something like this would help.

Existing HTML

<h1 id="testH1">Test H1</h1>
<div id="existingDiv">
    <div id="existingDivContent">Existing Div Content</div>
</div>

New HTML

<h1 id="testH1">Test H1</h1>
<div id="newDiv">
    <div id="existingDiv">
        <div id="existingDivContent">Existing Div Content</div>
    </div>
</div>

JS

The javascript is fairly rudimentary, but I think the concept can be applied to safely and properly achieve your goal.

$(document).ready(function() {
    //-- parent node you wish to copy
    var existingDiv = $('#existingDiv');

    //-- new parent div node
    var newDiv = $('<div id="newDiv">');

    //-- where we want to insert the new parent node
    var testH1 = $('#testH1');

    //-- stuff our previous parent node into our new parent node
    newDiv.html(existingDiv);

    //-- insert into the DOM
    testH1.after(newDiv);

});

http://jsfiddle/8qzvN/

本文标签： javascriptInsert just opening HTML tags after an elementStack Overflow

版权声明：本文标题：javascript - Insert just opening HTML tags after an element? - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1745644364a2668046.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。