在元素后插入仅打开的 HTML 标记？答案

【问题标题】：Insert just opening HTML tags after an element?在元素后插入仅打开的 HTML 标记？
【发布时间】：2012-11-09 22:54:13
【问题描述】：

我想在页面上的 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 方法。

【问题讨论】：

@f00bar 不起作用——浏览器会自动关闭所有打开的标签。这就是 DOM 应该如何工作的。 OP 将 DOM 与 HTML 源代码混淆了。
我会尝试 .html() 方法，但不会插入缺失的标签
试试 .after() 或 .append()/.prepend()
Paste </p> closing tag without spawning an opening p tag in contenteditable的可能重复
@banzsh .after() 插入结束标签， append() 插入 h1 元素内部而不是跟随它

标签： javascript jquery html

【解决方案1】：

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

现有的 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>

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/

【讨论】：

谢谢@Don，但我所追求的只是插入开始的 div 标签，而不是将内容包装在新的 div 中（我已经扩展了我的问题以使其更清楚）

【解决方案2】：

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

您说“结束标签包含在我无权访问的包含页脚文件中。”没有打开的关闭标签会被忽略，所以就 DOM 解析器而言，那些关闭标签是不存在的。

您的解决方案是：

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

不太好用。得到“参考错误 - h1 未定义”，但可以看到你在做什么。 'document.body.innerHTML' 有效。
@pelms 那是因为你需要先将h1 节点分配给这个变量，我没有包括那部分。比如：var h1 = document.getElementsByTagName('h1')[0];
知道了。我说得太直白了。

【解决方案4】：

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

【讨论】：

你会在什么字符串上使用 replace()？
你要替换一个元素的 innerHTML：document.body = document.body.replace('','
')
这种方法的问题，与 Asad 的方法一样，是关闭的 </div> 标签将被解析器丢弃，因此 div 元素的结束位置将是未知的。
document.body.innerHTML = document.body.innerHTML.replace('','

') 工作！非常感谢。
@Diodeus。阿萨德刚刚打败了你。