Help! I use two methods to add child nodes inside the node. But the results are different! Two kinds of code are below.
first code:
<!DOCTYPE html>
<html>
<head></head>
<body>
<ul id="ulid">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
<br/>
<input type="button" value="添加" onclick="add1();"/>
</body>
<script type="text/javascript">
function add1(){
var li1 = document.createElement("li")
var text1 = document.createTextNode("下一个")
li1.appendChild(text1)
document.getElementById("ulid").appendChild(li1);
}
</script>
</html>
second code:
<!DOCTYPE html>
<html>
<head></head>
<body>
<ul id="ulid">
<li>第一个</li>
<li>第二个</li>
<li>第三个</li>
</ul>
<br/>
<input type="button" value="添加" onclick="add1();"/>
</body>
<script type="text/javascript">
function add1(){
var li1 = document.createElement("li").appendChild(document.createTextNode("下一个"))
document.getElementById("ulid").appendChild(li1);
}
</script>
</html>
The method appendChild returns the node that was appended, in this case it is the text node.
Then you append the text node to the ul, which removes it from being a child of the li to be a child of the ul.
https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild#Returns
Related
I try get id parent p div (class mainRow), but my code in console return undefinied:
<div class="row mainRow" id="someId">
<div class="selected">
<p onclick="checkParentId(this)">Hello</p>
</div>
</div>
<script>
function checkParentId(element){
var a = $(element).parent( ".mainRow");
var b = $(a).attr("id");
console.log(b);
}
</script>
Link to jsfiddle: https://jsfiddle.net/50ev1jzq/
Since the .mainRow is not a parent of the paragraph, use .closest:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>parent demo</title>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<div class="row mainRow" id="someId">
<div class="selected">
<p onclick="checkParentId(this)">Hello</p>
</div>
</div>
<script>
function checkParentId(element){
debugger
var a = $(element).closest( ".mainRow" );
var b = $(a).attr("id");
console.log(b);
}
</script>
</body>
</html>
You could use parents(), because according to the docs:
Given a jQuery object that represents a set of DOM elements, the parent() method traverses to the immediate parent of each of these elements in the DOM tree and constructs a new jQuery object from the matching elements.
This method is similar to .parents(), except .parent() only travels a single level up the DOM tree.
As others have pointed out, closest() could also work. There are some differences tough:
I find sollution, i change .parent to .closest and code work
<div class="row mainRow" id="someId">
<div class="selected">
<p onclick="checkParentId(this)">Hello</p>
</div>
</div>
<script>
function checkParentId(element){
var a = $(element).closest( ".mainRow");
var b = $(a).attr("id");
console.log(b);
}
</script>
I cannot seem to be able to add a LI to UL using jQuery. When I click on the button, nothing happens.
Here is a quick fiddle which depicts the problem I am facing:
https://jsfiddle.net/80ugxpx7/2/
The JavaScript and HTML markup in question:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="jquery.min.js"></script>
<style type="text/css">
</style>
<script type="text/javascript">
/* declare global variable */
var recent = []
function add_to_recent() {
var x = document.getElementById('fileno').value
recent.push(x)
$("#recent ul").append('<li>'+x+'</li>')
}
</script>
</head>
<body>
<input type="fileno" type="text"><input type="button" value="search" onclick="add_to_recent()">
<br>
<ul id="recent">
<li>lol</li>
</ul>
</body>
</html>
OK I had to move your function around a bit,
you were mixing Pure JS and Jquery so I've made it all Jquery.
https://jsfiddle.net/link2twenty/80ugxpx7/4/
<input id="fileno" type="text">
<input type="button" value="search" onclick="add_to_recent()">
<br>
<ul id="recent"></ul>
var recent = []
add_to_recent = function () {
var x = $('#fileno').val();
recent.push(x);
$("#recent").append('<li>' + x + '</li>');
$('#fileno').val("");
}
One line solution:
<input id="fileno" type="text">
<input type="button" value="search" onclick="$('#recent').append('<li>'+$('#fileno').val()+'</li>');">
<br>
<ul id="recent">
</ul>
EDIT: JSFiddle indicates the code itself is good. Can anyone give some insight into why it may not be executing properly as a chrome extension?
I'm trying to make a simple To-do list Chrome extension for myself. Here is my code:
HTML:
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<title>To-Do-List</title>
<script src="popup.js"></script>
</head>
<body>
<div id="header"><h3 id="headtext">TO DO LIST</h3></div>
<form>
<input type="text" id="textbox" placeholder="Input"></input>
</form>
<button id="add">Add</button>
<p>TO DO LIST:</p>
<ul id="myList">
</ul>
</body>
</html>
And the Javascript:
<script type="text/javascript">
document.getElementById("add").addEventListener("click", function(){
var node = document.createElement("li");
var textnode = document.createTextNode(document.getElementById("textbox").value);
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
)
</script>
When I enter text in the input field then click the button, nothing happens.
I've modified your code a bit by adding window.onload function.
See below. it works now.
<html>
<head>
<link rel="stylesheet" type="text/css" href="theme.css">
<title>To-Do-List</title>
<script src="popup.js"></script>
<script type="text/javascript">
window.onload = function(){
document.getElementById("add").addEventListener("click", function(){
var node = document.createElement("li");
var textnode = document.createTextNode(document.getElementById("textbox").value);
node.appendChild(textnode);
document.getElementById("myList").appendChild(node);
}
)
};
</script>
</head>
<body>
<div id="header"><h3 id="headtext">TO DO LIST</h3></div>
<form>
<input type="text" id="textbox" placeholder="Input"></input>
</form>
<button id="add">Add</button>
<p>TO DO LIST:</p>
<ul id="myList">
</ul>
</body>
</html>
try this:
window.onload = function () {
document.getElementById("add").addEventListener("click", function() {
var node = document.createElement("li");
var text = document.getElementById("textbox").value;
node.innerHTML = textnode;
document.getElementById("myList").appendChild(node);
});
};
i am a beginner to java script.i do the bellow code for changing the text color into red using java script.But it doesn't work.what is the error in my code?
<!DOCTYPE html>
<html>
<head>
<script>
function display()
{
var col=document.getElementById("demo").innerHTML;
col.style.color="red";
}
</script>
</head>
<body>
<h1>My First JavaScript</h1>
<p id="demo">click on the button bellow.....</p>
<button onclick="display()">Display</button>
</body>
</html>
Remove innerHTML from var col=document.getElementById("demo").innerHTML;
<!DOCTYPE html>
<html>
<head>
<script>
function display()
{
var col=document.getElementById("demo");
col.style.color="#FF0000";
}
</script>
</head>
<body>
<h1>My First JavaScript</h1>
<p id="demo">click on the button below.....</p>
<button onclick="display()">Display</button>
</body>
</html>
Dont use the innerHTML, it returns a String.
Use the style on the object itself.
Check out it working: JsFiddle
You can try this ...
document.getElementById('demo').style.color = '#FF0000';
Replace this code:
function display()
{
var col=document.getElementById("demo").innerHTML;
col.style.color="red";
}
with this:
function display()
{
var col=document.getElementById("demo");
col.style.color="red";
}
Inner html would contain the html inside the demo tag, but you need to refer to the tag itself.
<!DOCTYPE html>
<html>
<head>
<script>
function display()
{
document.getElementById("demo").style.color="red";
}
</script>
</head>
<body>
<h1>Your Fixed JavaScript</h1>
<p id="demo">click on the button bellow.....</p>
<button onclick="display()">Display</button>
</body>
</html>
Here's the fixed one I just made the change of the words turn red because it wasn't
so I have a few links that have a class of 'button', and I am trying to get their text values with the jQuery .text() function, but it is returning nothing at the moment,
code:
$(document).ready(function() {
var tester = $('a.test').text();
alert(tester);
});
HTML:
<a class='test'>TEST</a>
any idea why this might not be working?
This code works, just try....
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
</head>
<body>
<a class="test">Test</a>
<p></p>
<script>
var string = $("a.test").text();
alert(string);
</script>
</body>
</html>