Manipulating DOM element using JavaScript or jquery
Question
I am just new learner in javascript, I was going through DOM manipulation in javascript or jquery
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.
Answer can be given using javascript or jquery both works for me
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]
<!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
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 . so I need to split it by tag ..... but whole element is in javascript variable! so how do I do it?
5 answers
solution1
1 2013-09-06 06:26:25
You should do it like
allPara = document.getElementsByTagName("p");
alert("Text of first paragraph: " + allPara[0].innerHTML);
In jQuery you can write (for the first P element)
$('p:first').html();
I think, You should learn vanilla JavaScript first, at least the basics and MDN is a good place for it.
Update :
You can do it using this (since OP asked for it in comment/parsing element from a variable)
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
solution2
1 2013-09-06 06:26:31
var myHTML ='<p>Hello World</p>'
Here myHTML is a string not a dom element. It wont contain a function called getElementsByTagName
If you are searching in the page it would be : document.getElementsByTagName
solution3
1 2013-09-06 06:31:49
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>
solution4
1 2013-09-06 06:46:19
Ok let me get this straight. You want to append this line "Text of first paragraph: Hello World" to the document.
Here is the DEMO
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. Now myHTML is a nodelist. A nodeList is like an array.
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]. 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.
Code
var myHTML ='Hello World';
var para = document.createElement("p");
para.innerHTML="Text of first paragraph: " +myHTML;
document.body.appendChild(para);
solution5
0 2013-09-06 07:54:36
try something like this
<script>
var myHTML ='<p>Hello World</p>'
document.write("Text of first paragraph: " + $(myHTML).html()); // using jquery
</script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.