In the XHTML page i have this div:
<div id="listAzioni">
<h4 style="margin-bottom:3px;">List shape :</h4>
</div>
Subsequently incorporated within the div an input element via javascript using the library innerXhtml.
var paper = document.getElementById("listAzioni");
var toWrite = "<h4 style=\"margin-bottom:3px\">List shape :</h4>";
toWrite += "<input type=\"button\" class=\"listButton\" value=\""+id+"\" onclick=\"showAction('"+id+"');\"/>"+'<br/>';
innerXHTML(paper,toWrite);
But after adding the input element has no onclick attribute. I tried so hard but I have not found anything that would solve my problem. Where am I doing wrong?
Which browsers have you tried?
I suggest you to use standard DOM APIs, I write your code as below:
<html>
<head>
<style type="text/css">
.button {
border: 1px solid black;
padding: 3px;
}
</style>
<script type='text/javascript'>
function addButton() {
var container = document.getElementById('container');
if (container != null && container != undefined) {
var child = document.createElement("div");
var button = document.createElement("input");
button.value = "Click to alert";
button.type = "button";
child.style.padding = "10px";
child.style.border = "2px solid red";
button.className = "button";
button.onclick = showAlert;
child.appendChild(button);
container.appendChild(child);
}
}
function showAlert() {
alert("you clicked the button!");
}
</script>
</head>
<body>
<div id="container"></div>
<input value="add div and button" type='button' onclick='addButton();'/>
</body>
</html>
Related
I have 2 button, one in top another in the bottom. when I click the top button it works fine. when i scroll down to bottom button and click the button again ( same function ) it appends the element with some where. I am calculating the top position from absolute way. getting the relation ship with body.
so how to handle this kind of scenario?
Live demo
Js code :
const h1All = document.getElementsByTagName("h1");
function addElement() {
let div = document.createElement('div');
div.innerText = "I am here";
div.style.border = "1px solid green";
div.style.position = "absolute";
let h1 = h1All[0];
h1.style.border = "1px solid red";
let parentPos = h1.getBoundingClientRect();
console.log(parentPos)
document.body.appendChild(div);
div.style.top = parentPos.y + parentPos.height + "px";
}
HTML:
<h1>Hello Plunker!</h1>
<div class="mydiv">some div info goes here
<button onclick="addElement()">Click Me </button> //works fine.
</div>
<button onclick="addElement()">Click Me </button> //it's not. after scroll down!!
the second button appends the element some where. what is the correct way to calculation do we have to do here?
Thanks in advance.
const h1All = document.getElementsByTagName("h1");
function addElement() {
let div = document.createElement('div');
div.innerText = "I am here";
div.style.border = "1px solid green";
div.style.position = "absolute";
let h1 = h1All[0];
h1.style.border = "1px solid red";
let parentPos = h1.getBoundingClientRect();
document.body.appendChild(div);
div.style.top = parentPos.y + parentPos.height + "px";
}
.mydiv{
border: 1px solid green;
height: 600px;
}
<h1>Hello Plunker!</h1>
<div class="mydiv">some div info goes here
<button onclick="addElement()">Click Me </button>
</div>
<button onclick="addElement()">Click Me </button>
If you want absolute positioning, you need to take scrolling into account. You can do that with window.scrollY. Notice the change at the last line of addElement:
const h1All = document.getElementsByTagName("h1");
function addElement() {
let div = document.createElement('div');
div.innerText = "I am here";
div.style.border = "1px solid green";
div.style.position = "absolute";
let h1 = h1All[0];
h1.style.border = "1px solid red";
let parentPos = h1.getBoundingClientRect();
document.body.appendChild(div);
div.style.top = parentPos.y + parentPos.height + window.scrollY + "px";
}
.mydiv{
border: 1px solid green;
height: 600px;
}
<h1>Hello Plunker!</h1>
<div class="mydiv">some div info goes here
<button onclick="addElement()">Click Me </button>
</div>
<button onclick="addElement()">Click Me </button>
I am unable to move "close" to the right side.
I have tried float:right, right:0, align-content:right in css but nothing seems to work.
index.html
<head>
<style>
.close{
right:0;
}
</style>
</head>
<body>
<div>
<input type = "text" size = "35" id="work" placeholder = "Enter your list here">
<input type="submit" onClick="appendToDoList()" value="Add to List">
</div>
<ul id="workUl">
<li>Work out</li>
</ul>
<script>
//include a close button for list
var getList= document.getElementsByTagName("LI");
var i;
for(i=0; i<getList.length; i++){
var span = document.createElement("SPAN");
var closebtn = document.createTextNode("\u00D7");
span.appendChild(closebtn);
getList[i].appendChild(span);
}
//add to the list
function appendToDoList(){
var ListN = document.createElement("li");
var N = document.getElementById("work").value;
var t = document.createTextNode(N);
ListN.appendChild(t);
if (N === '') {
alert("You must write something!");
} else {
document.getElementById("workUl").appendChild(ListN);
}
document.getElementById("work").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
var i;
for(i=0; i<close.length;i++){
}
ListN.appendChild(span);
}
The close button should be align to the right side. Could you please suggest something. I also went through the similar post in past, however it does not seem to work for me.
Try to write a well structured code. I have create a fiddle with 2-3 minor corrections and the close "button" seems to be on the right side (https://jsfiddle.net/x1kf8mz6/)
HTML:
<!DOCTYPE html>
<html>
<body>
<div>
<input type = "text" size = "35" id="work" placeholder = "Enter your list here">
<input type="submit" onClick="appendToDoList()" value="Add to List">
</div>
<ul id="workUl">
<li>Work out</li>
</ul>
</body>
</html>
JS:
//add to the list
function appendToDoList(){
var ListN = document.createElement("li");
var N = document.getElementById("work").value;
var t = document.createTextNode(N);
ListN.appendChild(t);
if (N === '') {
alert("You must write something!");
} else {
document.getElementById("workUl").appendChild(ListN);
}
document.getElementById("work").value = "";
var span = document.createElement("SPAN");
var txt = document.createTextNode("\u00D7");
span.className = "close";
span.appendChild(txt);
var i;
for(i=0; i<close.length;i++){
}
ListN.appendChild(span);
}
and finally CSS:
.close{
right:0;
}
Make sure that you set the "position" absolute for span tag and position "relative" for li tag. Then it will definitely work.
Try add this in CSS (for me it worked, if i understood your question)
ul li {
position: relative;
padding: 5px 5px 5px 5px;
}
.close {
position: absolute;
right: 0; //you can change the icon distance (**for example:**just add like 5em, the *close* icon will come closer)//
top: 0;
}
I am trying to add div on clicking add button.
on clicking add button the div is created with the
class name ui modal and
id test.
For multiple div created the same id gets added.
I need to give different ID for Each additionally added div.
How can I generate different ID using append child.
Also I need to get the tree structure with parent child and sibling node.
function add_div(){
var div = document.createElement('div');
document.body.appendChild(div);
div.className = 'ui-modal';
div.id = 'test';
div.innerHTML = '<span class="msg">Hello world.</span>';
div.textContent = 'Hello world.';
}
.ui-modal{
width: 200px;
height: 50px;
border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="wrapper">
<input type="button" value="ADD" onclick="add_div();">
<input type="button" value="DELETE">
</div>
</body>
</html>
After running this above code And inspecting i am seeing each additionally added div having same ID.
How to generate separate ID?
You can declare a counter outside add_div and append it into id everytime you create a div
var counter = 1;
function add_div(){
var div = document.createElement('div');
document.body.appendChild(div);
div.className = 'ui-modal';
div.id = 'test' + (counter++);
div.innerHTML = '<span class="msg">Hello world.</span>';
div.textContent = 'Hello world.';
}
.ui-modal{
width: 200px;
height: 50px;
border: 1px solid red;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="wrapper">
<input type="button" value="ADD" onclick="add_div();">
<input type="button" value="DELETE">
</div>
</body>
</html>
You can use the length of elements with class img to use that as the suffix to the id:
function add_div(){
var div = document.createElement('div');
document.body.appendChild(div);
div.className = 'ui-modal';
div.id = 'test-' + document.querySelectorAll('.ui-modal > .msg').length;
div.innerHTML = '<span class="msg">Hello world.</span>';
//div.textContent = 'Hello world.';
}
.ui-modal{
width: 200px;
height: 50px;
border: 1px solid red;
}
<div class="wrapper">
<input type="button" value="ADD" onclick="add_div();">
<input type="button" value="DELETE">
</div>
On my page I have:
<div id='something'></div>
and I want to append this type of 'button' to it using JS:
<span class="picon-p-add-news"></span>Read more news
I tried to use document.createElement but I'm not sure how to make it not just append it as text. How do I do this ?
Something like this, where you can pass your element ID and URL through function arguments.
<!DOCTYPE html>
<html>
<head>
<script>
function appendButton(elementId, url){
var buttonEl = document.createElement("a");
buttonEl.href = url;
var buttonTextEl = document.createElement("span");
buttonTextEl.className = "picon-p-add-news";
buttonTextEl.innerText = "Read more news";
buttonEl.appendChild(buttonTextEl);
document.getElementById(elementId).appendChild(buttonEl);
}
</script>
</head>
<body>
<div>
<button id="button">Click to add</button>
<div id='something'></div>
</div>
<script>
document.getElementById("button").addEventListener('click', () => appendButton("something", "/news_events/"));
</script>
</body>
</html>
Use document.createElement to create the specified HTML elements. Then you can append those to your #something root element using Node.appendChild function. You can also use Element.innerHTML to gets or sets the HTML markup contained within the element.
The Node.appendChild() method adds a node to the end of the list of children of a specified parent node.
const something = document.getElementById('something');
// creating the span element, then add a class attribute
const span = document.createElement('span');
span.setAttribute('class', 'picon-p-add-news');
span.innerHTML = 'span'; // some text to improve visualization
// create the anchor element with the href attribute
const a = document.createElement('a');
a.setAttribute('href', '/news_events/');
// append the span element inside the <a>
a.appendChild(span);
a.innerHTML += 'anchor'; // add extra text for display
// add the <a> element tree into the div#something
something.appendChild(a);
#something {
border: 1px solid;
text-align: center;
font-size: 2rem;
}
#something > a {
padding: 8px;
}
.picon-p-add-news {
background: red;
padding: 0 4px;
}
<div id="something"></div>
Like this? You can use the innerHTML attribute to add HTML inside of an Element
document.getElementById("something").innerHTML += '<span class="picon-p-add-news"></span>Read more news';
<div id='something'></div>
Or, if you created this as an Element with createElement, you can use appendChild:
let a = document.createElement("a");
a.setAttribute("href", "/news_events/");
let span = document.createElement("span");
span.setAttribute("class", "picon-p-add-news");
a.appendChild(span);
a.innerHTML += "Read more news";
document.getElementById("something2").appendChild(a);
<div id="something2"></div>
1) Create a element:
var aEl = document.createElement('a');
aEl.href = "/news_events/"
2) Create span element:
var spanEl = document.createElement('span');
spanEl.classList.add('picon-p-add-news');
3) Append span element to a element
aEl.appendChild(spanEl);
4) Insert text in a element
aEl.insertAdjacentText('beforeend','Read more news');
5) Append whole a tree to you div
var divEl = document.getElementById('something');
divEl.appendChild(aEl);
<html>
<head>
<style>
#myDIV {
border: 1px solid black;
margin-bottom: 10px;
}
</style>
</head>
<body>
<p>Click the button to create a P element with some text, and append it to DIV.</p>
<div id="myDIV">
A DIV element
</div>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var para = document.createElement("P");
var t = document.createTextNode("This is a paragraph.");
para.appendChild(t);
document.getElementById("myDIV").appendChild(para);
}
</script>
</body>
</html>
Give something like this a try: I used https://www.w3schools.com/jsref/met_document_createelement.asp for reference.
I have a button to show and hide certain part by calling CSS stylesheet change with onClick button. I want the same onclick to toggle in between hide and show. And it is hiding the content with .HeaderContainer {display:none;} but can I get help how to toggle it ?
I want same button if click again then it should override the .HeaderContainer with just {} ;
I have made the code like this to hide. I need how the same button can show this again.
<script type="text/javascript">
function loadToggleAction() {
var sheet = document.createElement('style')
sheet.innerHTML = ".HeaderContainer {display:none;}";
document.body.appendChild(sheet);
}
</script>
<form>
<input type="button" id="dxp" class="button" value="Hide top Pane" onclick='javascript: loadToggleAction();' />
</form>
You could do it like this:
var isHidden = false;
function loadToggleAction() {
var sheet = document.createElement('style')
if(!isHidden){
sheet.innerHTML = ".HeaderContainer {display:none;}";
}else{
sheet.innerHTML = ".HeaderContainer {display:block;}";
}
document.body.appendChild(sheet);
isHidden = !isHidden; //This will change the value to the opposite
}
Or like I would to it:
var isHidden = false;
function toggleVisibility() {
var div = document.getElementsByClassName("test")[0];
if(!isHidden){
div.style.display = "none";
}else{
div.style.display = "block";
}
isHidden = !isHidden;
}
.test {
display: block;
width: 100px;
height: 100px;
background: #ff0000;
}
<div class="test"></div>
<button onclick="toggleVisibility()">Click me</button>