Adding Text to a New Paragraph
Problem
You want to create a new paragraph with text and insert it just before the second para‐
graph within a div element:
// use getElementById to access the div element
var div = document.getElementById("target");
// use getElementsByTagName and the collection index
// to access the second paragraph
var oldPara = div.getElementsByTagName("p")[1]; // zero based index
// create a text node
var txt =
document.createTextNode("The new paragraph will contain this text");
// create a new paragraph
var para = document.createElement("p");
// append the text to the paragraph, and insert the new para
para.appendChild(txt);
div.insertBefore(para, oldPara);
EXPLAIN
The text within an element is, itself, an object within the DOM. Its type is a Text node, and it is created using a specialized method, createTextNode().The method takes one parameter: the string containing the text. shows a web page with a div element containing four paragraphs. The JavaScript creates a new paragraph from text provided by the user via a prompt.
The text could just as easily have come from a server communication or other process. The provided text is used to create a text node, which is then appended as a child node to the new paragraph. The paragraph element is inserted in the web page before the first paragraph.
Demonstrating various methods for adding content to a web page
<head>
<title>Adding Paragraphs</title>
</head>
<body>
<div id="target">
There is a language 'little known,'
Lovers claim it as their own.
<br />
Its symbols smile upon the land,
Wrought by nature's wondrous hand;
<br />
And in their silent beauty speak,
Of life and joy, to those who seek.
<br />
For Love Divine and sunny hours
In the language of the flowers.
<br />
</div>
<script>
// use getElementById to access the div element
var div = document.getElementById("target");
// get paragraph text
var txt = prompt("Enter new paragraph text","");
// use getElementsByTagName and the collection index
// to access the first paragraph
var oldPara = div.getElementsByTagName("p")[0]; //zero based index
// create a text node
var txtNode = document.createTextNode(txt);
// create a new paragraph
var para = document.createElement("p");
// append the text to the paragraph, and insert the new para
para.appendChild(txtNode);
div.insertBefore(para, oldPara);
</script>
</body>
</html>
Join Our Telegram Channel to Stay Updated
![Javascript DOM Tutorial Part 1 [ Selectors ] How to Select HTML Elements Using Javascript](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFE3NttPjKRUzbBqnGQNT8mtxG71mrDGLb-k8f-rw_I9Ov3Tu9uIFQtUgoxOozsx2TNf449IJ7SPgrEFFqrDdN98mWUWXsp8zFUteAmA7UaXDDjyQHE5b0oVkCzXT_aIgCVFD_ksqt18/s72-c/jspart10.jpg)
No comments:
Post a Comment