how to place a TextNode into a div instead of body, thank you in advance!
Sorry if I am so unexperienced.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to create a h1 element with some text.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var h = document.createElement("H1");
var t = document.createTextNode("Hello");
h.appendChild(t);
document.body.appendChild(h);
}
</script>
</body>
</html>
One way of doing it would be to add a div to Body and then look for it using getElementById
<body>
<div id="myButtonContainer">
<p>Click the button to create a h1 element with some text.</p>
<button onclick="myFunction()">Try it</button>
</div>
<div id="myDiv"></div>
<script>
function myFunction() {
var myButtonContainer = document.getElementById("myButtonContainer");
myButtonContainer.style.display='none';
var h = document.createElement("H1");
var t = document.createTextNode("Hello");
h.appendChild(t);
var myDiv = document.getElementById("myDiv");
myDiv.appendChild(h);
}
</script>
</body>
You can check the example here: http://jsfiddle.net/jmgwya58/1/
Related
I have a very basic code. It simply changes the style of the button on click. It works fine when used getElementById but I wanna do it the XPATH way. I'm new to JavaScript. What I'm doing wrong and how can I achieve this?
The code:
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to change the layout of this paragraph</p>
<button onclick="myFunction()">Click Me!</button>
<script>
function myFunction() {
let x = document.getElementByXpath("//html[1]/body[1]/button[1]");
x.style.fontSize = "25px";
x.style.color = "red";
}
</script>
</body>
</html>
Look at document.evaluate()
function getElementByXpath(path) {
return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}
function myFunction() {
let x = getElementByXpath("//html[1]/body[1]/button[1]");
x.style.fontSize = "25px";
x.style.color = "red";
}
<p id="demo">Click the button to change the layout of this paragraph</p>
<button onclick="myFunction()">Click Me!</button>
I have a very basic code. It simply changes the style of the button on click. It works fine when used getElementById but I wanna do it the XPATH way. I'm new to JavaScript. What I'm doing wrong and how can I achieve this?
The code:
<!DOCTYPE html>
<html>
<body>
<p id="demo">Click the button to change the layout of this paragraph</p>
<button onclick="myFunction()">Click Me!</button>
<script>
function myFunction() {
let x = document.getElementByXpath("//html[1]/body[1]/button[1]");
x.style.fontSize = "25px";
x.style.color = "red";
}
</script>
</body>
</html>
Look at document.evaluate()
function getElementByXpath(path) {
return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}
function myFunction() {
let x = getElementByXpath("//html[1]/body[1]/button[1]");
x.style.fontSize = "25px";
x.style.color = "red";
}
<p id="demo">Click the button to change the layout of this paragraph</p>
<button onclick="myFunction()">Click Me!</button>
I have given code below. I want that a variable of JS take anchor tag text as input and display in another Element through innerHTML.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p><a class="myAnchor" href="http://www.microsoft.com">www.microsoft.com</a>
<a class="myAnchor" href="http://www.microsoft.com">www.microsoft.com</a></p>
<p>Click the button to change the value of the href attribute of the link above to "www.cnn.com".</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var x=$(".myAnchor").on("click",function(event){
event.preventDefault();
$(this).text();
});
function myFunction() {
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
What you are doing wrong?
Instead of assigning the click event to a variable, assign the inner text of the clicked link in a variable and on clicking the button assign this variable to the required element.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<p>
<a class="myAnchor" href="http://www.microsoft.com">www.microsoft.com1</a>
<a class="myAnchor" href="http://www.microsoft.com">www.microsoft.com2</a>
</p>
<p>
Click the button to change the value of the href attribute of the link
above to "www.cnn.com".
</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
var x = '';
$(".myAnchor").on("click", function(event) {
event.preventDefault();
x = $(this).text();
});
function myFunction() {
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
Goal - I want to add "Start was Clicked!" inside the "main" element of my Html file.
This is the body of my Html File.
<body>
<h1></h1>
<p>First paragraph.</p>
<p class="intro">Second <span>paragraph</span>.</p>
<button id="start">Start</button>
<main></main>
</body>
This is my js code.
let button = document.querySelector('#start')
button.addEventListener('click', function(){
let elem = document.createElement('span');
elem.innerText = "Start was clicked!";
document.body.appendChild(elem);
}); // This just appends to bottom of the page, how would I add it to the main element without an id.
}
Use document.querySelector("main") to select the <main> element.
let button = document.querySelector('#start')
let main = document.querySelector('main')
button.addEventListener('click', function() {
let elem = document.createElement('span');
elem.innerText = "Start was clicked!";
main.appendChild(elem);
});
<h1></h1>
<p>First paragraph.</p>
<p class="intro">Second <span>paragraph</span>.</p>
<button id="start">Start</button>
<main></main>
Or you can use tagname instead.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<h1></h1>
<p>First paragraph.</p>
<p class="intro">Second <span>paragraph</span>.</p>
<button id="start">Start</button>
<main></main>
<script>
let btn = document.getElementById("start")
let main = document.getElementsByTagName("main")[0]
btn.addEventListener('click', function() {
let elem = document.createElement('span');
elem.innerText = "Start was clicked!";
main.appendChild(elem)
});
// This just appends to bottom of the page, how would I add it to the main element without an id.
</script>
</body>
</html>
I am running the code from w3schools to add button dynamically to the page. Here is the code.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to make a BUTTON element with text.</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var btn = document.createElement("BUTTON");
var t = document.createTextNode("CLICK ME");
btn.appendChild(t);
document.body.appendChild(btn);
}
</script>
</body>
</html>
But this dynamic addition doesn't work when I have a <form> tag. What changes in the JavaScript I can make to accommodate dynamic button without having to remove the <form> tag?
function myFunction() {
var btn = document.createElement("BUTTON");
var t = document.createTextNode("CLICK ME");
btn.appendChild(t);
document.getElementById('theForm').appendChild(btn);
}
</script>
<p>Click the button to make a BUTTON element with text.</p>
<button onclick="myFunction()">Try it</button>
<form id="theForm">
</form>