使用 JavaScript 或 jquery 操作 DOM 元素

Question

I am just new learner in javascript, I was going through DOM manipulation in javascript or jquery我只是 javascript 的新手，我正在 javascript 或 jquery 中进行 DOM 操作

I was trying to catch the 'p' tag which was in my javascript variable but does not work can someone please do the necessary correction.我试图捕捉我的 javascript 变量中的“p”标签，但它不起作用有人可以做必要的更正。

Answer can be given using javascript or jquery both works for me可以使用 javascript 或 jquery 给出答案，两者都对我有用

I also had some similar question here ( Getting tags when whole HTML page is in one javascript variable )[sorry for the confusing explanation in this question]我在这里也有一些类似的问题（当整个 HTML 页面都在一个 javascript 变量中时获取标签）[抱歉这个问题中令人困惑的解释]

W3Schools W3学校

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

I have already seen this similar question get-content-of-a-div-using-javascript and dom-javascript-get-text-after-tag我已经看过这个类似的问题get-content-of-a-div-using-javascript和dom-javascript-get-text-after-tag

which does not answer my question这不能回答我的问题

My Scenario is我的场景是
I have all html page in one javascript variable and I need to append it to my page but we can not do it since you can not have two body or HTML tag .我有一个 javascript 变量中的所有 html 页面，我需要将它附加到我的页面，但我们不能这样做，因为你不能有两个 body 或 HTML 标签。 so I need to split it by tag ..... but whole element is in javascript variable!所以我需要按标签分割它..... 但整个元素都在 javascript 变量中！ so how do I do it?那我该怎么做呢？

Answer 1

You should do it like你应该这样做

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

DEMO.演示。

In jQuery you can write (for the first P element)在jQuery 中，您可以编写（对于第一个P元素）

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

DEMO.演示。

I think, You should learn vanilla JavaScript first, at least the basics and MDN is a good place for it.我认为，您应该先学习 vanilla JavaScript，至少基础知识和MDN是学习它的好地方。

Update :更新：

You can do it using this (since OP asked for it in comment/parsing element from a variable)您可以使用它来做到这一点（因为 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.演示。

Answer 2

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

Here myHTML is a string not a dom element.这里myHTML是一个字符串而不是一个 dom 元素。 It wont contain a function called getElementsByTagName它不会包含名为getElementsByTagName的函数

If you are searching in the page it would be : document.getElementsByTagName如果您在页面中搜索，它将是： document.getElementsByTagName

Answer 3

Why not simply do this:为什么不简单地这样做：

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

For just inner Text:对于内部文本：

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

Answer 4

Ok let me get this straight.好吧，让我明白这一点。 You want to append this line "Text of first paragraph: Hello World" to the document.您想将这一行“第一段文本：Hello World”附加到文档中。

Here is the DEMO这是演示

JS JS

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

Explanation: You are saving all the Elements with tag "p" in a var called myHTML.说明：您将所有带有标记“p”的元素保存在名为 myHTML 的 var 中。 Now myHTML is a nodelist.现在 myHTML 是一个节点列表。 A nodeList is like an array. nodeList 就像一个数组。

SO you call the elements of the nodelist like you would call the elemnts of an array因此，您可以像调用数组的元素一样调用节点列表的元素

Hence the first paragraph would be myHTML[0].因此，第一段将是 myHTML[0]。 Now you want to append the Text to the first paragraph so the following line serves the purpose现在您想将文本附加到第一段，以便以下行服务于目的

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

EDIT: On further clarification from the OP it is understood that OP needs another "p" tag with the desired text.编辑：根据 OP 的进一步澄清，可以理解 OP 需要另一个带有所需文本的“p”标签。

DEMO演示

Code代码

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

Answer 5

try something like this尝试这样的事情

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

使用 JavaScript 或 jquery 操作 DOM 元素

问题描述

5 个解决方案

解决方案1
1 2013-09-06 06:26:25

Update :更新：

解决方案2
1 2013-09-06 06:26:31

解决方案3
1 2013-09-06 06:31:49

解决方案4
1 2013-09-06 06:46:19

解决方案5
0 2013-09-06 07:54:36

使用 JavaScript 或 jquery 操作 DOM 元素

问题描述

5 个解决方案

解决方案1 1 2013-09-06 06:26:25

Update :更新 ：

解决方案2 1 2013-09-06 06:26:31

解决方案3 1 2013-09-06 06:31:49

解决方案4 1 2013-09-06 06:46:19

解决方案5 0 2013-09-06 07:54:36

解决方案1
1 2013-09-06 06:26:25

Update :更新：

解决方案2
1 2013-09-06 06:26:31

解决方案3
1 2013-09-06 06:31:49

解决方案4
1 2013-09-06 06:46:19

解决方案5
0 2013-09-06 07:54:36