Question

我们如何解析和排序嵌套的html元素，如下所示：

来自此：

<ins> 
    <ins> 
        <ins> 
            God
        </ins>
        Bless
    </ins>
    You
</ins>

为此：

<ins>
    God
</ins>
<ins>
    Bless
</ins>
<ins>
    you
</ins>

在以上两种情况下的输出应为：

上帝保佑你

我需要对DOM中的所有ins标签执行此操作。

Answer 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>

Answer 2

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>

仅当您每次只有一个字时，它才起作用。

Answer 3

尝试一下：

<!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>直接注入到正文中。

使用jQquery或JavaScript对嵌套的html元素进行排序

3 个答案: