我们如何解析和排序嵌套的html元素,如下所示:
来自此:
<ins>
<ins>
<ins>
God
</ins>
Bless
</ins>
You
</ins>
为此:
<ins>
God
</ins>
<ins>
Bless
</ins>
<ins>
you
</ins>
在以上两种情况下的输出应为:
上帝保佑你
我需要对DOM中的所有ins
标签执行此操作。
答案 0 :(得分:1)
考虑到您已经提供了HTML结构,因此这是一种更为简化的方法。
var itemEl = document.querySelector('ins');
var words = itemEl.innerText.split(" ");
let container = document.getElementById('container');
words.forEach((word) => {
let p = document.createElement('ins');
p.innerText = word + " ";
container.appendChild(p);
});
<ins>
<ins>
<ins>
God
</ins>
Bless
</ins>
You
</ins>
<div id="container">
</div>
答案 1 :(得分:0)
var text = document.getElementsByTagName("ins")[0].innerText;
//text = "God Bless You"
var result = document.createElement("div");
for (word of text.split(" ")){ // for each word in ["God", "Bless", "You"]
var newTag = document.createElement("ins"); //recreate <ins> tag
var newContent = document.createTextNode(word);
newTag.appendChild(newContent); //Put the word in it
result.appendChild(newTag);
};
console.log(result.innerHTML); //do whatever you want with result
//<ins>God</ins><ins>Bless</ins><ins>You</ins>
仅当您每次只有一个字时,它才起作用。
答案 2 :(得分:0)
尝试一下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<script>
function loopOver () {
let inses = document.getElementsByTagName("ins");
let texts = inses[0].innerText.split(' ');
for (let i = 0, l = texts.length; i < l; i++) {
let brandNew = document.createElement('ins');
brandNew.appendChild(document.createTextNode(texts[i]));
document.body.appendChild(brandNew);
}
}
</script>
</head>
<body>
<ins>
<ins>
<ins>
God
</ins>
Bless
</ins>
You
</ins>
<script>
loopOver();
</script>
</body>
如您所见,此代码将新的<ins>
直接注入到正文中。