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]

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>

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?

It does not work. How exactly does it not work? Any error messages/output/expected output? — Vince, Sep 06 '13 at 06:25
this can't work because getElementsByTagName does not work on strings, but on DOM elements... try document.getElementsByTagName() ... edit - use var. — magyar1984, Sep 06 '13 at 06:27
yes I know it doesnot work on string and that is the scenario for me i have all html page in one java script variable and i need to append it to my page but we can not do it since u can not have two body or HTML tag . so i need to split it by tag ..... but whole element is in java script variable !!! so any idea how do i do it ?? @magyar1984 — Hitesh, Sep 06 '13 at 07:21
My apologies for not explaining the question properly @Vince — Hitesh, Sep 06 '13 at 07:42

The Alpha · Answer 1 · 2013-09-06T07:38:42.777

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)

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

DEMO.

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

DEMO.

edited Sep 06 '13 at 07:38

answered Sep 06 '13 at 06:26

The Alpha

143,660
29
287
307

Thanks i already know this things but scenario for me is that i have all html page in one java script variable and i need to append it to my page but we can not do it since u can not have two body or HTML tag . so i need to split it by tag ..... but whole element is in java script variable !!! so any idea how do i do it ?? – Hitesh Sep 06 '13 at 07:23
Thanks for heads up in vanilla java script :) i will learn it – Hitesh Sep 06 '13 at 07:24
Unless it's inside the dom/document you can't use dom methods to select a tag. – The Alpha Sep 06 '13 at 07:26
But, i think you can do it using a temp element, create an element first and then set innerHTML of this element the string that you have in a variable and search for the item. – The Alpha Sep 06 '13 at 07:31

score 1 · Answer 2 · answered Sep 06 '13 at 06:26

1

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

answered Sep 06 '13 at 06:26

loxxy

12,990
2
25
56

Rameez · Answer 3 · 2013-09-06T07:35:30.590

1

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>

edited Sep 06 '13 at 07:35

answered Sep 06 '13 at 06:31

Rameez

1,712
2
18
39

smart ans but i do not want print it but just get the content which is inside – Hitesh Sep 06 '13 at 07:25
It will print in html format.. it wont print as
Hello World
but just Hello World. – Rameez Sep 06 '13 at 07:26
My apologies, misunderstood your question. here you go : http://jsfiddle.net/5ETgy/1/ – Rameez Sep 06 '13 at 07:34
wow !!! awesome you are genious u !!! just one question !!! will it work for body and style tag too ?? – Hitesh Sep 06 '13 at 07:41
It should.for body i guess you'll need to use .html() instead of .text() if it contains more html elements inside. – Rameez Sep 06 '13 at 07:46
can u have a look at my question http://stackoverflow.com/questions/18279629/remove-specific-tags-from-html-while-avoiding-iframes here .... i think you have answer for that question as well – Hitesh Sep 06 '13 at 08:42
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/36916/discussion-between-hitesh-and-eez) – Hitesh Sep 06 '13 at 09:07

MarsOne · Answer 4 · 2013-09-06T09:16:53.260

1

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.

DEMO

Code

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

edited Sep 06 '13 at 09:16

answered Sep 06 '13 at 06:46

MarsOne

2,155
5
29
53

Well i thought you wanted to demonstrate how getElementsByTagName works. Your question was not clear. – MarsOne Sep 06 '13 at 09:08
My apologies !!! Could you review the question again i have done some edit for better explanation – Hitesh Sep 06 '13 at 09:16
@hitesh, Check and tell me if this the desired Output – MarsOne Sep 06 '13 at 09:18
...http://jsfiddle.net/hiteshbhilai2010/p8erw/8/...check i did some change to expain my requirement ..... now need head content in one variable and body content in other – Hitesh Sep 06 '13 at 09:31
How are you trying to add tags like .You cant do that. If you need to add content to the header check this.http://jsfiddle.net/marsone/p8erw/9/ – MarsOne Sep 06 '13 at 09:52
i am getting whole content in HTML5 format in an variable instead of using iframe i need to sort it [remove unwanted tag ] and append it to my HTML page – Hitesh Sep 06 '13 at 11:20

score 0 · Answer 5 · answered Sep 06 '13 at 07:54

0

try something like this

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

answered Sep 06 '13 at 07:54

rajesh kakawat

10,826
1
21
40

it will print the whole content i just need the content in the body – Hitesh Sep 06 '13 at 09:02

Manipulating DOM element using JavaScript or jquery

5 Answers5

Update :