Question

我想在页面上的H1元素之后插入几个打开的DIV标记，而不插入相应的结束标记（因为结束标记包含在我无法访问的包含的页脚文件中）。

即。现有代码：

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

新代码：

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

DOM方法将div作为完整（闭合）元素插入，'createTextNode'插入转义字符，'innerHTML'需要插入元素。甚至试图用document.write插入一个脚本元素，没有任何运气。

任何想法（jQuery都没问题）？

更新以下工作：

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

正如 Asad 所指出的那样，解决方案（现在看来显而易见）是在HTML而不是DOM方法上使用字符串方法。

Answer 1

如果您正在处理DOM操作，请使用DOM操作方法。如果您正在处理HTML操作，请使用字符串操作方法。

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

Answer 2

我认为这将回答你的问题，这完全是关于有效的XML形成。

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

Answer 3

忘记DOM方法，使用.replace（）将其作为字符串插入。

Answer 4

你的方法根本就是错误的。浏览器在看到DOM时解析它，并自动关闭任何应该关闭的标记。使用JavaScript只能插入开始标记是不可能的。

您说“结束标记包含在我无法访问的包含的页脚文件中。”将忽略尚未打开的已关闭标记，因此就DOM解析器而言，这些结束标记不存在。

您的解决方案是：

将开头标记放在标题中，或者放在服务器端的其他位置，或者
使用JavaScript抓取所有以下DOM元素，包括页脚，并将.wrap()全部放在所需的div中。

Answer 5

这种做法似乎有点不正统，但也许这样的事情会有所帮助。

现有HTML

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

新HTML

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

JS

javascript相当简陋，但我认为这个概念可以安全地应用到你的目标中。

$(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.net/8qzvN/

只插入元素后面的HTML标签？

5 个答案: