Javascript adding an element into another element without id - javascript

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>

Related

How to get elements from a cloned div

I have a div I have cloned that has elements inside it. I want to get the heading (h2) value out of the second child in the div
How do I go about this? I want to get the "bent over row" value from <div class="heading_add"><h2>Bent over row</h2>
// Make heading and button
let headingDiv = document.createElement('div');
headingDiv.classList = "heading_add"
let newh2 = document.createElement('h2');
newh2.innerHTML = itemRef.name;
headingDiv.appendChild(newh2)
videoCard.appendChild(headingDiv)
// Clones the div with video
newBtn.addEventListener('click', () =>{
const exercises = document.querySelector('.exercises');
let clone = videoCard.cloneNode(true); //Clones the div tags I'm trying to get
clone.defaultMuted = true;
let firstKid = clone.firstChild;
let secondChild = firstKid.firstChild.muted = true;
let meTest = firstKid.firstChild;
clone.classList.add('newVid');
console.log(meTest)
exercises.appendChild(clone)
});
<div class="videoCard newVid">
<div class="vid">
<video src="videostoredinfirebase" width="300" class="videoAdded" autoplay="" loop=""></video>
</div>
<div class="heading_add"><h2>Bent over row</h2>
<button class="add_video_btn">+</button></div>
</div>

Quick and dirty fix
function add() {
var myDiv = document.getElementById("test");
var divClone = myDiv.cloneNode(true);
document.body.appendChild(divClone);
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script src="script.js" charset="utf-8"></script>
<meta charset="utf-8">
<title></title>
</head>
<body>
<div id="test">
<h2>
This is a div
</h2>
</div>
<button onclick="add()">+</button>
</body>
</html>

How to pass data from Node.js to html

I have a simple program and some data strings that I want to pass to HTML page that hosted locally, but I'm getting error: ReferenceError: document is not defined
There's my .js file index.js:
let some_string = "some data";
document.getElementById("dataButton").onclick = function(){
var paragraph = document.createElement("p");
var text = document.createTextNode(some_string);
paragraph.appendChild(text);
var element = document.getElementsByTagName("body")[0];
element.appendChild(paragraph);
}
And there's my HTML test.html:
<!DOCTYPE html>
<html>
<head>
<title>New title</title>
</head>
<body>
<h1>Data page</h1>
<button id="dataButton">Add data</button>
<script src="index.js"></script>
</body>
</html>
Many thanks if someone come up with idea what am I doing wrong!

Update your files to the following
let some_string = "some data";
const dataButton = document.getElementById("dataButton");
dataButton.addEventListener("click", () => {
var paragraph = document.createElement("p");
var text = document.createTextNode(some_string);
paragraph.appendChild(text);
var element = document.getElementsByTagName("body")[0];
element.appendChild(paragraph);
});
<!DOCTYPE html>
<html>
<head>
<title>New title</title>
</head>
<body>
<h1>Data page</h1>
<button id="dataButton">Add data</button>
<script src="./index.js"></script>
</body>
</html>

How can i delete items from a list in JavaScript by clicking?

I am trying to make a grocery list and i want individual items to be added and also deleted. How can this be done?
function getValue() {
var val = document.getElementById("itemList").value;
var list = document.getElementById("demo");
var element = document.createElement("li");
var addList = document.createTextNode(val);
element.appendChild(addList);
list.prepend(element);
}
<html>
<head>
<title> Common List </title>
</head>
<body>
<form>
<input type="text" id="itemList">
<button type="button" onclick="getValue()">add to list</button>
<ul id="demo"></ul>
</form>
</body>
</html>

Add an event listener to the element when you add it. This can use the remove() method to remove it from the list.
function getValue() {
var val = document.getElementById("itemList").value;
var list = document.getElementById("demo");
var element = document.createElement("li");
var addList = document.createTextNode(val);
element.appendChild(addList);
element.addEventListener("click", function() {
if (confirm(`Do you really want to remove ${this.innerText}`)) {
this.remove();
}
});
list.prepend(element);
}
<html>
<head>
<title> Common List </title>
</head>
<body>
<form>
<input type="text" id="itemList">
<button type="button" onclick="getValue()">add to list</button>
<ul id="demo"></ul>
</form>
</body>
</html>

How to place a TextNode into a div instead of body

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/

Using jQuery for Dom Outlining.

I am a newbie in jQuery and javascript, so this might seem as a trivial question. I want to use the DOM Outliner code found here in an html page that I have created.
My html page source is as follows
<!DOCTYPE html>
<html>
<head>
<h3>Dom Outlining</h3>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.dom-outline-1.0.js" type="text/javascript"></script>
<script>
$(document).ready(function() {
var myExampleClickHandler = function (element) { console.log('Clicked element:', element); }
var myDomOutline = DomOutline({ onClick: myExampleClickHandler });
// Start outline:
myDomOutline.start();
// Stop outline (also stopped on escape/backspace/delete keys):
myDomOutline.stop();
});
</script>
</head>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<div class="first class">
<p> This is a division.</p>
</div>
</body>
</html>
However, this doesn't seem to select and highlight the element as required. Can someone tell me what's missing in my code?

Because you are stoping highlighting as soon as it starts
$(document).ready(function() {
var myExampleClickHandler = function (element) { console.log('Clicked element:', element); }
var myDomOutline = DomOutline({ onClick: myExampleClickHandler });
// Start outline:
myDomOutline.start();
// Stop outline (also stopped on escape/backspace/delete keys):
//myDomOutline.stop();
});
Demo: Plunker
In ideal implementation there will be a start and stop buttons as I added in my demo.

You just need to remove myDomOutline.stop(); :)
$(document).ready(function() {
var myExampleClickHandler = function (element) { console.log('Clicked element:', element); }
var myDomOutline = DomOutline({ onClick: myExampleClickHandler });
// Start outline:
myDomOutline.start();
// Stop outline (also stopped on escape/backspace/delete keys):
// myDomOutline.stop();
});
You were starting it and then stopping it almost immediately - resulting in nothing!
Check here http://jsfiddle.net/vJYya/1/

<html>
<head>
<h3>Dom Outlining</h3>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script src="jquery.dom-outline-1.0.js" type="text/javascript"></script>
<script>
$(function() {
var myDomOutline = DomOutline({
onClick: function (element) {
console.log('Clicked element:', element);
}
});
$('#start').click(function(){
myDomOutline.start();
});
$('#stop').click(function(){
myDomOutline.stop();
});
});
</script>
</head>
<body>
<input id="start" type="button" value="Start outline"/>
<input id="stop" type="button" value="Stop outline"/>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
<div class="first class">
<p> This is a division.</p>
</div>
</body>
</html>

Categories