Javascript 在元素后插入刚刚打开的HTML标记？_Javascript_Jquery_Html

Javascript 在元素后插入刚刚打开的HTML标记？

javascript jquery html

Javascript 在元素后插入刚刚打开的HTML标记？,javascript,jquery,html,Javascript,Jquery,Html,我想在页面上的H1元素之后插入几个开始DIV标记，而不插入相应的结束标记（因为结束标记包含在包含的页脚文件中，我无权访问） i、 e。现行守则： <body> <h1>Heading One</h1> ... page content... </div> </div> </body> 标题一 ... 页面内容。。。新代码： <body> <h1>Heading One</h1&

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

i、 e。现行守则：

<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">')

document.body.innerHTML=document.body.innerHTML.replace（“”，“”）

正如Asad所指出的，解决方案（当然现在看起来很明显）是在HTML上使用字符串方法，而不是DOM方法。

我认为这将回答您的问题，这都是关于有效的XML格式

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

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

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

h1.parentElement.innerHTML=h1.parentElement.innerHTML.replace（“标题一”，“标题一”）；

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

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

您的解决方案是：

将开始标记放在标题中，或服务器端的其他位置，或

使用JavaScript获取以下所有DOM元素，包括页脚，并将它们全部放在所需的div中

这种做法似乎有点离经叛道，但或许类似的做法会有所帮助

现有HTML

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

测试H1
现有Div内容

新HTML

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

测试H1
现有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);

});

$（文档）.ready（函数（）{
//--要复制的父节点
var existingDiv=$（“#existingDiv”）；
//--新的父div节点
var newDiv=$（''）；
//--要插入新父节点的位置
var testH1=$（“#testH1”）；
//--将以前的父节点填充到新的父节点中
html（现有div）；
//--插入到DOM中
testH1.after（newDiv）；
});

@f00bar无法工作——浏览器将自动关闭所有打开的标记。这就是DOM应该如何工作的。OP将DOM与HTML源代码混淆。我会尝试使用.HTML（）方法，但不确定是否插入缺少的tagsTry.after（）或.append（）/.prepend（）可能与@banzsh重复。after（）插入结束标记，append（）插入h1元素内部，而不是跟随它。您会使用什么字符串替换（）打开？您要替换元素的innerHTML:document.body=document.body.replace（“”“”），与Asad的方法一样，这种方法的问题是关闭的

标记将被解析器丢弃，因此div元素的结束位置将是未知的。document.body.innerHTML=document.body.innerHTML.replace（“”“”）有效！多谢你。我知道DOM方法必须创建有效的HTML，但我所寻找的是一种变通方法，即插入一段HTML，而不考虑其在该点上的有效性（最后一页将是有效的HTML，因为结束标记包含在页脚中）。谢谢@Don，但我想要的只是插入开头的div标签，而不是将内容包装在新的div中（我已经扩展了我的问题以使其更清楚），这不太管用。获取“参考错误-h1未定义”，但可以看到您的意图document.body.innerHTML'有效。@这是因为您需要首先将

h1

节点分配给此变量，我没有包括该部分。类似于：

var h1=document.getElementsByTagName（'h1'）[0]明白了。我太直率了。