使用 JavaScript 或 jquery 操作 DOM 元素答案

【问题标题】：Manipulating DOM element using JavaScript or jquery使用 JavaScript 或 jquery 操作 DOM 元素
【发布时间】：2019-12-07 13:23:39
【问题描述】：

我只是 javascript 的新手，我正在使用 javascript 或 jquery 进行 DOM 操作

我试图捕捉在我的 javascript 变量中但不起作用的“p”标签有人可以做必要的更正吗？

可以使用 javascript 或 jquery 给出答案，这两种方法都适用于我

我在这里也有一些类似的问题 (Getting tags when whole HTML page is in one javascript variable)[对不起，这个问题的解释令人困惑]

W3Schools

<!DOCTYPE html>
<html>
<body>

<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>

<script>
var myHTML ='<p>Hello World</p>'
x=myHTML.getElementsByTagName("p");
document.write("Text of first paragraph: " + x[0].innerHTML);
</script>

</body>
</html>

我已经看到过类似的问题get-content-of-a-div-using-javascript 和dom-javascript-get-text-after-tag

没有回答我的问题

我的场景是
我有一个 javascript 变量中的所有 html 页面，我需要将它附加到我的页面，但我们不能这样做，因为你不能有两个 body 或 HTML 标记。所以我需要按标签拆分它.....但是整个元素都在javascript变量中！那我该怎么做呢？

【问题讨论】：

它不起作用。它究竟是如何不起作用的？任何错误消息/输出/预期输出？
这不起作用，因为 getElementsByTagName 不适用于字符串，但适用于 DOM 元素...尝试 document.getElementsByTagName() ... 编辑 - 使用 var。
是的，我知道它不适用于字符串，这就是我的情况，我在一个 java 脚本变量中拥有所有 html 页面，我需要将它附加到我的页面，但我们不能这样做，因为你不能有两个 body 或 HTML 标签。所以我需要按标签拆分它.....但是整个元素都在java脚本变量中！所以知道我该怎么做吗？ @magyar1984
我很抱歉没有正确解释这个问题@Vince

标签： javascript jquery dom

【解决方案1】：

var myHTML ='<p>Hello World</p>'

这里 myHTML 是一个字符串而不是一个 dom 元素。它不会包含一个名为 getElementsByTagName

的函数

如果您在页面中搜索，它将是：document.getElementsByTagName

【讨论】：

【解决方案2】：

为什么不简单地这样做：

<!DOCTYPE html>
<html>
<body>


<p>The DOM is very useful!</p>
<p>This example demonstrates the <b>getElementsByTagName</b> method.</p>

<script>
var myHTML ='<p>Hello World</p>';
document.write("Text of first paragraph: " + myHTML);
</script>

</body>
</html>

仅用于内部文本：

<script>
var myHTML ='<p>Hello World</p>';
var para = document.createElement('P');
para.innerHTML=myHTML;   
document.write("Text of first paragraph: " + $(para).find('P').text());
</script>

【讨论】：

smart ans 但我不想打印它，只是获取里面的内容
它将以 html 格式打印.. 它不会打印为
Hello World
而只是 Hello World。
抱歉，误解了您的问题。给你：jsfiddle.net/5ETgy/1
哇！真棒你是天才你！就一个问题！！！它也适用于 body 和 style 标签吗？？
It should.for body 我猜你需要使用 .html() 而不是 .text() 如果里面包含更多的 html 元素。

【解决方案3】：

你应该这样做

allPara = document.getElementsByTagName("p");
alert("Text of first paragraph: " + allPara[0].innerHTML);

DEMO.

在jQuery 中你可以写（对于第一个P 元素）

$('p:first').html();

DEMO.

我认为，你应该先学习 vanilla JavaScript，至少是基础知识，MDN 是学习它的好地方。

更新：

您可以使用它来做到这一点（因为 OP 在评论/解析变量中的元素中要求它）

var htmlString = '<span>Span</span><p>Para 1</p><p>Para 2</p>';
el = document.createElement('div');
el.innerHTML = htmlString;
var ps = el.getElementsByTagName('p');
console.log(ps[0].innerHTML); // Para 1

DEMO.

【讨论】：

谢谢，我已经知道了这些事情，但对我来说，我的所有 html 页面都在一个 java 脚本变量中，我需要将它附加到我的页面，但我们不能这样做，因为你不能拥有两个 body 或 HTML 标签。所以我需要按标签拆分它.....但是整个元素都在java脚本变量中！所以知道我该怎么做吗？？
感谢您在香草 java 脚本中的提醒 :) 我会学习它
除非在 dom/document 中，否则不能使用 dom 方法来选择标签。
但是，我认为您可以使用临时元素来做到这一点，首先创建一个元素，然后将此元素的 innerHTML 设置为您在变量中拥有的字符串并搜索该项目。

【解决方案4】：

好吧，让我直说吧。您想将此行“第一段文本：Hello World”附加到文档中。

这里是DEMO

JS

var myHTML=document.getElementsByTagName("p");
myHTML[0].innerHTML="Text of first paragraph:Hello World "+myHTML[0].innerHTML;

说明：您将所有带有标签“p”的元素保存在一个名为 myHTML 的 var 中。现在 myHTML 是一个节点列表。 nodeList 就像一个数组。

所以你调用节点列表的元素就像调用数组的元素一样

因此第一段将是 myHTML[0]。现在您想将文本附加到第一段，以便以下行达到目的

 myHTML[0].innerHTML="Text of first paragraph:Hello World "+myHTML[0].innerHTML;

编辑：根据 OP 的进一步说明，据了解，OP 需要另一个带有所需文本的“p”标签。

DEMO

代码

var myHTML ='Hello World';
var para = document.createElement("p");
para.innerHTML="Text of first paragraph: " +myHTML;
document.body.appendChild(para);

【讨论】：

好吧，我以为您想演示 getElementsByTagName 的工作原理。您的问题不清楚。
我很抱歉！！！你能再回顾一下这个问题吗？我已经做了一些编辑以获得更好的解释
@hitesh，检查并告诉我这是否是所需的输出
...jsfiddle.net/hiteshbhilai2010/p8erw/8/...check 我做了一些改变来解释我的要求.....现在需要一个变量中的头部内容和其他变量中的正文内容
你如何尝试添加之类的标签。你不能这样做。如果您需要向标题添加内容，请检查此。jsfiddle.net/marsone/p8erw/9

【解决方案5】：

试试这样的

    <script>
        var myHTML ='<p>Hello World</p>'
        document.write("Text of first paragraph: " + $(myHTML).html()); // using jquery
    </script>

【讨论】：

它将打印整个内容我只需要正文中的内容