我如何“合并"通过JavaScript的两个HTML标签 [英] How can I "merge" two HTML tags via JavaScript

问题描述

这是我的HTML沙盒":

Here is my HTML "sandbox":

<p>1 2 3</p>
<span id="myid">
<span id="mytext">
<p>4 5 6</p>
<p>7 8 9</p>
<p>10 11 12</p>
</span>
</span>
<p>13 14 15</p>

我想相应地合并" p标签:
(为便于查看，我在进行更改的地方添加了减号:)

I would like to "merge" the p tags accordingly:
(To make it easier to see I've added a minus sign where I've made the changes:)

<p>1 2 3 -
<span id="myid">
<span id="mytext">
- 4 5 6</p>
<p>7 8 9</p>
<p>10 11 12 -
</span>
</span>
- 13 14 15</p>

我在每个地方都添加了一个减号，实际上我剥离了<p>或</p>标记，使两个段落元素(1 2 3和4 5 6之间以及10 11 12和10之间)合并. 13 14 15)-(此合并仅可实现123-456和101112-131415 的显示内联).

Every place I've added a minus sign, I have actually stripped a <p> or </p> tag making a merge between the two paragraph elements ( between 1 2 3 and 4 5 6 & between 10 11 12 and 13 14 15) - (This merge is only to achieve a display inline for 123-456 & 101112-131415).

如何使用原始" JavaScript(请不要提供库)实现此结果.

注意: 我尝试创建一些东西，但是花了我80行代码-我确信有更好的方法来做到这一点.

修改: 乔恩·汉纳(Jon Hanna)在他的评论中提到，我可以这样使用正确的HTML(作为JavaScript的结果):

Jon Hanna mentioned in his comment I could use correct HTML like so (as the result of JavaScript):

    <p>1 2 3 <span class="myclass mytext">4 5 6</span></p>
<p class="myclass mytext">7 8 9</p>
<p><span class="myclass mytext"10 11 12</span> 13 14 15</p>

推荐答案

(和我在一起，我在您最近的编辑之前就开始写这篇文章.不过，我认为它仍然很有用.)

我不确定您要实现什么，但是我可以告诉您，确切很难实现您要使用JavaScript的要求.这主要是因为HTML无效.

I'm not sure what you want to achieve, but I can tell you that it's very hard to achieve exactly what you're asking for using JavaScript. This is mostly because the HTML would be invalid.

让我们第一次遍历为什么 HTML无效.当浏览器解析HTML时，它将构建DOM节点的嵌套树.您的第一个示例可以这样表示:

Let's first walk through why the HTML would be invalid. When the browser parses HTML, it builds a nested tree of DOM Nodes. Your first example could be represented like this:

• <p>
  • 1 2 3
  • <span id="mytext">
    • <p>
      • 4 5 6
      • <span id="mytext">
        • <p>
          • 4 5 6
          • 7 8 9
          • 10 11 12
          • 13 14 15

          使用JavaScript和DOM，您可以遍历这棵树并对其进行操作.您可以组合来自各种<p>标记的文本节点，并将它们放置在单个<p>标记中而不会出现问题.但是您将无法创建第二个示例的结构.它的形状根本不像DOM树，因此您不能使用DOM来创建HTML.

          Using JavaScript and the DOM, you can walk through this tree and manipulate it. You could combine the text node from various <p> tags and place them in a single <p> tag without problem. But you won't be able to create the structure of your second example. It's simply not shaped like a DOM tree, so you can't use the DOM to create that HTML.

          将HTML处理为第二个示例的唯一方法是通过innerHTML，例如 Jon Hanna解释 .好消息是，浏览器会始终将无效的HTML纠正为有效的DOM结构.坏消息是每种浏览器的操作方式都不同，所以您永远都不知道最终会得到什么.

          The only way manipulate the HTML into the shape of your second example is through innerHTML, like Jon Hanna explains. The good news is that browsers will always correct invalid HTML into a valid DOM structure. The bad news is that each browser does this differently, so you never know what you end up with.

          唯一的真正解决方案是重新思考HTML结构，就像您在最新编辑中所做的那样.

          The only real solution is to rethink your HTML structure, like you've done in your latest edit.

          解决原始问题的方法取决于原始HTML的静态程度.我将给出一个粗略的示例，为此我假设:

          The way to solve your original problem depends on how static your original HTML is. I'll give a crude example, for which I'll presume that:

          • 总有 5 个<p>的
          • <p>的第二个到第四个总是在<span>的里面，而第一个和第五个总是在它们外面
          • there's always exactly 5 <p>'s
          • the second through fourth of the <p>'s are always inside the <span>'s, and the first and fifth always outside them

          如果同时满足这两个条件，则可以使用以下方式:

          If those two conditions are met, you could use something like this:

          var paragraphs = document.getElementsByTagName('p');
          var newParagraphs = [];
          
          function createElementWithText(tagname, text, classname) {
              var classname = classname || '';
              var element = document.createElement(tagname);
              element.className = classname;
              element.appendChild(document.createTextNode(text));
              return element;
          }
          
          newParagraphs[0] = createElementWithText('p', paragraphs[0].textContent);
          newParagraphs[0].appendChild(createElementWithText('span', paragraphs[1].textContent, 'myclass mytext'));
          
          newParagraphs[1] = createElementWithText('p', paragraphs[2].textContent, 'myclass mytext');
          
          newParagraphs[2] = document.createElement('p');
          newParagraphs[2].appendChild(createElementWithText('span', paragraphs[3].textContent, 'myclass mytext'));
          newParagraphs[2].appendChild(document.createTextNode(paragraphs[4].textContent));
          

          我已经在JSFiddle上发布了一个工作示例: jsfiddle.net/vSrLJ/

          I've posted a working example on JSFiddle: jsfiddle.net/vSrLJ/

          这篇关于我如何“合并"通过JavaScript的两个HTML标签的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！