Using DOM manipulation techniques, - insert the contents of the textbox as parag
ID: 3659936 • Letter: U
Question
Using DOM manipulation techniques, - insert the contents of the textbox as paragraph text dynamically at the top of the page under the headings; allow this new text to accumulate. -defining a new paragraph element(20) -inserting the textbox1 contents into the new element(20) -creating a variable representing the enclosing element(15) -appending the new element to the enclosing element(20) -allowing additional paragraph elements to accumulate(10) - Clear textbox1 after the new paragrah text is added(10)
Explanation / Answer
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> Dynamic Text Demo </title>
</head>
<body>
<h1> Dynamic Text Demo </h1>
<div id="paradiv"> </div>
<div id="textboxdiv">
Enter The Text:<input type="text" name="text" id="text"><br>
<input type="button" value="Add Text Dynamically !">
</div>
<script>
function addText() {
var paragraph ;
alert(document.getElementById("textPara"));
if(document.getElementById("textPara") == null) {
paragraph = document.createElement("p");
paragraph.setAttribute("id" , "textPara");
paragraph.setAttribute("style" , "background-color:#669900;color:#330000");
paragraph.innerText = "";
document.getElementById("paradiv").appendChild(paragraph);
alert(document.getElementById("textPara"));
}
document.getElementById("textPara").innerText += document.getElementById("text").value;
document.getElementById("text").value = "";
alert(paragraph.innerText);
}
</script>
</body>
</html>
output:
asdasdsxZXzsfasf sadasd
Related Questions
drjack9650@gmail.com
Navigate
Integrity-first tutoring: explanations and feedback only — we do not complete graded work. Learn more.