Why innerHTML properity cannot get the wanted value - javascript

In w3schools Javascript tutorial it states:
The value of the text node can be accessed by the node's innerHTML property, or the nodeValue.
Then I change the following code:
<!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<script>
txt=document.getElementById("intro").childNodes[0].nodeValue;
document.write(txt);
</script>
</body>
</html>
to
<!DOCTYPE html>
<html>
<body>
<p id="intro">Hello World!</p>
<script>
txt=document.getElementById("intro").childNodes[0].innerHTML;
document.write(txt);
</script>
</body>
</html>
But it didn't work, could anyone please let me know did I miss something here? Thanks.

document.getElementById("intro").childNodes[0] is a text node, but only element nodes have innerHTML.
You can use document.getElementById("intro").innerHTML instead (to get the innerHTML of the paragraph instead of of the text inside the paragraph).

Try
txt=document.getElementById("intro").innerHTML;
document.write(txt);

You can access innerHTML directly from the p element:
txt=document.getElementById("intro").innerHTML;
document.write(txt);
Also, try to find an alternative to W3Schools: http://www.w3fools.com/

Change
txt=document.getElementById("intro").childNodes[0].innerHTML;
To
txt=document.getElementById("intro").innerHTML;
http://jsfiddle.net/THMVC/

use only
txt=document.getElementById("intro").innerHTML;

Related

jquery val() doesn't change value

jsfiddle: https://jsfiddle.net/7n6pysLr/
I'm trying to change the value of the #test p from Hello to Bye. It doesn't work:
<html>
<head>
</head>
<body>
<div id="test"><p>Hello</p></div>
</body>
</html>
$("#test p").val("Bye");
What am I doing wrong?
You need to change the html in this case with .html()
$("#test p").html("Bye");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
</head>
<body>
<div id="test">
<p>Hello</p>
</div>
</body>
</html>
val() method is used for <input>.
In your case you are using <p></p> so here you have to use .html() or .text(), both will work. These methods are used to update the innerText/innerHtml.
html() : returns the content (innerHTML) of the selected elements.
text() : method sets or returns the text content of the selected elements.

Object not reflecting attribute in paragraph

I have written a simple code that runs properly in console, but is not reflecting the property of object in code, I cant make out whats wrong with the code:
<html>
<head>
<script>
function alpha(){
var x = {name:"Sunil",age:37,gender:"male"};
document.getElementById('para1').innerHTML(x.name);
console.log(x.name);
}
</script>
</head>
<body>
<button id=but1 onclick=alpha()>Click Me</button>
<p id=para1> This is paragraph One. </p>
</body>
</html>
Kindly, denote where am I wrong, as console is working fine with same code if I remove #para1 line from head!
Thanks in advance!
innerHTML is not a method, it's a property. Assign the text to the property:
document.getElementById('para1').innerHTML = x.name;

Html tag with id attribute

I was wondering what html tag that suppport id attribute either than <p> tag because i want to change the tag by javascript but i dont want it to be appear in paragraph.
This all what ive been trying
<!DOCTYPE html>
<html>
<body>
Name : <p id="user">user1</p>
<script>
document.getElementById("user").innerHTML="Arvin";
</script>
</body>
</html>
but the result is
Name :
Arvin
what I want is
Name : Arvin
thanks for spending your time to read this..any help will much appreciated
Every tag supports id. In your case, <span> would work well.
document.getElementById("user").innerHTML="Arvin";
Name : <span id="user">user1</span>
This code goes wrong because paragraph are shown into a new line (by browser).
This code put text in two lines (without your Javascript)
<html>
<body>
Name : <p id="user">user1</p>
</body>
</html>
You maybe shoud better do this:
<html>
<body>
<p>Name : <span id="user">user1</span></p>
</body>
</html>
document.getElementById("user").innerHTML="Arvin";
See running example here:
I cannot think of any tag that wouldn't support the id attribute, neither can the HTML5 spec:
3.2.5 Global attributes
The following attributes are common to and may be specified on all
HTML elements (even those not defined in this specification): ... id
...
Try adding display: inline style in <p> tag and your problem is solved. You can use id calling on any tag though.
<!DOCTYPE html>
<html>
<body>
Name : <p id="user" style="display:inline;">user1</p>
<script>
document.getElementById("user").innerHTML="Arvin";
</script>
</body>
</html>

jquery insert-before to text in the same DOM

Hi I'm working on inserting a text to this DOM but my try did not work like I expecting.
<p class="doing">Peter are here</p>
<script>$("p.doing").before("I and ");</script>
I'm expecting to have result:
<p class="doing">I and Peter are here</p>
but it was :
I and
<p class="doing">Peter are here</p>
Please kindly advise how to solve this.
Use prepend instead.
$("p.doing").prepend("I and ");
$(".doing").html('I and '+$(".doing").html());
Use the jQuery prepend() method:
<p class="doing">Peter are here</p>
<script>$(".doing").prepend("I and ");</script>
DEMO
instead of before, you should use prepend, as before will insert the text into p tag with a class doing.
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p class="doing">Peter are here</p>
<script>$(".doing").prepend("I and");</script>
</body>
</html>​

How to use replace in div?

I have got one question, how to use javascript replace() in div tag? I tried it like that:
<html>
<body>
<div id="ahoj">ahoj</div>
<script type="text/javascript">
document.write(document.getElementById("ahoj").replace("ahoj","hola"));
</script>
</body>
</html>
...but it is not working.. Any ideas?
document.getElementById("ahoj") is an HTMLElement object. Use document.getElementById("ahoj").innerHTML
document.write(document.getElementById("ahoj").replace(/ahoj/g,"hola"));
Or if you don't want a new element:
document.getElementById("ahoj").innerHTML = document.getElementById("ahoj").innerHTML.replace(/ahoj/g,"hola");
Replace the string and set the innerHTML to the new string. Example
I think innerHTML is what you'll need to use.
document.write(document.getElementById("ahoj").innerHTML.replace("ahoj", "hola"));
<script type="text/javascript">
var el = document.getElementById("ahoj");
el.innerHTML = el.innerHTML.replace(/ahoj/g,”hola”);
</script>

Categories