gpt4 book ai didi

javascript - 静态布局与 jQuery wrapInner - 不同的输出

转载 作者:行者123 更新时间:2023-12-02 13:44:08 27 4
gpt4 key购买 nike

如果我写这样的代码:

<body>
<xmp>
<p>hello world</p>
<div></div>
</xmp>
</body>

输出将是:

<p>hello world</p>
<div></div>

但是,代码

<body>
<p>hello world</p>
<div></div>
</body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script>$( "body" ).wrapInner( "<xmp />" );</script>

不会给我标签。输出将是:

hello world

为什么会发生这种情况以及如何解决?

最佳答案

免责声明:您不应使用 <xmp>

它不起作用,因为您使用的是 DOM 方法,该方法仅移动 DOM 节点。 body 的内容仍然是元素。 xmp 元素仅提供自定义 HTML 解析算法。所以你需要重新解析所有源。这将破坏元素的所有内部数据。

var xmp = document.createElement('xmp');
xmp.innerHTML = document.body.innerHTML; // Custom XMP parsing
document.body.innerHTML = ''; // Remove current contents
document.body.appendChild(xmp); // Insert XMP
<p>hello world</p>
<div></div>

但是依赖 XMP 的魔力是错误的。解析为文本的正确方法是使用 textContent .

var pre = document.createElement('pre');
var code = pre.appendChild(document.createElement('code'));
code.textContent = document.body.innerHTML; // Parse as text
document.body.innerHTML = ''; // Remove current contents
document.body.appendChild(pre);
<p>hello world</p>
<div></div>

关于javascript - 静态布局与 jQuery wrapInner - 不同的输出,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41533696/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com