包裹内HTML部分

我想知道有没有办法转换成这样：包裹内HTML部分

<body> 
    Foo 
    Bar 
    <div>Abc</div> 
    <div>Xyz</div> 
</body>

要这样：

<body> 
    <div id="new"> 
     Foo 
     Bar 
    </div> 
    <div>Abc</div> 
    <div>Xyz</div> 
</body>

作为一个新手，我知道innerHTML和jQuery wrap基本的东西，但这样的代码：

var foo = document.body.innerHTML; 
console.log(foo);

给我的全身，包括Abc和Xyz divs。所以，它不能解决问题。

来源

2017-01-06 jsv

应该来换行' “富”'和' “酒吧” 之间的字符'会保留吗？还是应该只将'＃text'节点的'.textContent'设置为动态创建的'.123HT'元素的'.innerHTML'？ – guest271314

我正在努力Chrome的Markdown扩展，所以我认为应该保留换行符...... – jsv

@ guest271314对不起，也许我在之前的评论中忘记提及你 – jsv

您可以使用contents().filter()来检索文本节点，然后使用wrapAll()将它们放置在新的div元素中。试试这个：

$('body').contents().filter(function() { 
 
    return this.nodeType == 3 && this.textContent != ''; 
 
}).wrapAll('<div id="new" />');

/* only to show the new div exists... */ 
 
#new { border: 1px solid #C00; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
Foo 
 
Bar 
 
<div>Abc</div> 
 
<div>Xyz</div>

来源

2017-01-06 17:22:26

非常感谢！但据我了解，它不会保留Foo和Bar之间的换行符。有没有办法解决它？ – jsv

你需要换行吗？多个空格在html中是不相关的 –

不想打扰你，但可能你也可以显示如何在过滤中包含'Abc' div，但没有'Xyz' div？无论如何，我接受了答案。 – jsv

您可以使用.contents()，.filter()，.prependTo()。要保留新的行字符，请将#newcsswhite-space属性设置为pre。

var nodes = $("body").contents().filter(function() { 
 
    return this.nodeType === 3 && /Foo|Bar/.test(this.textContent) 
 
}); 
 

 
$("<div></div>", { 
 
    id:"new", 
 
    html: nodes, 
 
    css: {whiteSpace: "pre"} 
 
}).prependTo("body")

#new { 
 
    color: sienna; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<body> 
 

 
Foo 
 

 
Bar 
 

 
<div>Abc</div> 
 

 
<div>Xyz</div> 
 

 
</body>

来源

2017-01-06 17:22:40 guest271314

@jsv查看更新后的帖子。 – guest271314

非jQuery的解决方案：

可以遍历全身的所有子节点和每一个文本节点移动到一个新元素，直到你到达第一个元素节点。例如：

var div = document.createElement('div'); 
 
div.id = 'new'; 
 
var childNodes = document.body.childNodes; 
 
while (childNodes[0].nodeType !== Node.ELEMENT_NODE) { 
 
    div.appendChild(childNodes[0]); 
 
} 
 
document.body.insertBefore(div, childNodes[0]);

#new { 
 
    color: red; 
 
}

Foo 
 
Bar 
 
<div>Abc</div> 
 
<div>Xyz</div>

来源

2017-01-06 17:24:27

非常感谢！但据我了解，它不会保留Foo和Bar之间的换行符。有没有办法解决它？ – jsv

它确实保留了它们。但浏览器将换行符视为普通的空白区域。如果你想*渲染*新行使用'pre'元素而不是'div'。 –

包裹内HTML部分

回答

相关问题