jquery insert-before to text in the same DOM - javascript

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

Related

Modify HTML DOM based on iframe using javascript

index.html
<html>
<head>
<title>Index</title>
</head>
<body>
<p>some text</p>
link
<iframe name="f"></iframe>
</body>
</html>
Is it possible to hide the text inside p-tag once the target website is fully loaded inside the iframe?
Try this link for solution.
Modified link as per #Barmar comments.
HTML
<p id="removeText"> some text</p>
<iframe src="demo_iframe.htm" name="iframe_a" id="iframe_a"></iframe>
W3Schools.com
JS
document.getElementById('iframe_a').onload = function() {
document.getElementById('removeText').innerHTML = '';
}

HTML Javascript Onclick?

CAN ANYONE PLEASE HELP ME FIND OUT WHY THE ONCLICK ISNT WORKING... I also have a CSS sheet connecting my span classes but for some reason onclick isnt working...
<head>
<link href="stylizing.css" rel="stylesheet">
<script>
function showCode()
{
document.getElementById("latestDiscountCode").className ="unhideBlock textAlignLeft";
}
</script>
</head>
<p class="textAlignLeft" onclick = "showCode();">
<span class="xxx">
CLICK ME
</span>
</p>
If you use document.getElementById, you need specify the "id":
Example:
<!DOCTYPE html>
<html>
<body>
<p>Click the button to trigger a function that will output "Hello World" in a p element with id="demo".</p>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>
Example by: http://www.w3schools.com/jsref/event_onclick.asp
There is no id specified on your element .
<p class="textAlignLeft" id="latestDiscountCode" onclick = "showCode();">
....
</p>
The id can be placed on whatever element you want to change the classname of. Code above is assuming this is the "p" tag.
Hope this helps.
I suspect you have a typo in either your id name or your stylesheet class names. The code you supplied does not include an element with an of "latestDiscountCode" so I have created one as an example. If you click on the CLICK ME text you will see your browers DOM inspector that the correct classes are added to the div.
<html>
<head>
<link href="stylizing.css" rel="stylesheet">
<script>
function showCode()
{
document.getElementById("latestDiscountCode").className ="unhideBlock textAlignLeft";
}
</script>
</head>
<body>
<p class="textAlignLeft" onclick = "showCode();">
<span class="xxx">
CLICK ME
</span>
</p>
<p id="latestDiscountCode">
foo
</p>
</body>
</html>
I don't think you need that semi-colon ;
<p class="textAlignLeft" onclick = "showCode()">
Move the <script> to the end of the body. Otherwise, it'll execute before the DOM's been loaded. Credits to #Federico.
Alternatively, listen for DOMContentLoaded.

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>

Why innerHTML properity cannot get the wanted value

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;

Why is my code not working?

I just wrote this code and when I tested it, the javascript wouldn't work.
I have javascript enabled and I tried with a different code and it worked. I think there's maybe a bug but I can't see it.
<!DOCTYPE html>
<html>
<body>
<p id=“id”>Some Text</p>
<script>
document.getElementById(“id”).innerHTML=“Different Text”;
</script>
</body>
</html>
You are using smart quotes (“”) instead of normal quotes (""). Replace the quotes and it will work.
<p id="id">Some Text</p>
<script>
document.getElementById("id").innerHTML="Different Text";
</script>
Perhaps this is because you are using a word processor, not an IDE?

Categories