I've created a div adiv how would I make this div a child of bdiv using Javascript?
Assuming adiv is created in Javascript and bdiv is created declaratively on the page:
document.getElementById("bdiv").appendChild(adiv);
Here is the sample code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript">
function appendDiv()
{
var div1=document.getElementById('div1');//get the div element
var div2=document.createElement("div");//create a new div
div2.innerHTML="div2";
div1.appendChild(div2);// append to div
}
</script>
</head>
<body onload=appendDiv()>
<div id="div1">
div1
</div>
</body>
</html>
assuming you've got your bdiv and adiv references to HTMLElements:
bdiv.appendChild(adiv);
adds adiv to bdiv as a last children.
see a complete example :
http://jsfiddle.net/XFMUp/
You can use the appendChild function as follows:
<div id="diva">a</div>
<div id="divb">b</div>
The use the following javaScript to move the div having removed it.
var diva = document.getElementById("diva");
var divb = document.getElementById("divb");
diva.appendChild(divb);
Check out this example on jsFiddle
Related
I am learning to create an element dynamically in an html page using javascript. In this code I am trying to create a simple "h6" inside "div-1".
<!DOCTYPE html>
<header>
<meta charset="utf-8">
</header>
<body>
<button onclick="constructElement()">click</button>
<div id="div-1"></div>
<script>
function constructElement(){
var elem = document.createElement("h6");
elem.innerText("Dynamically added text.")
document.getElementById("div-1").appendChild(elem);
}
</script>
</body>
</html>
there are two mistakes in your code
the first is that you used wrong "id" name div-1 instead of div1
also, innerText isn't a function
this is the code after the fix :)
<header>
<meta charset="utf-8">
</header>
<body>
<button onclick="constructElement()">click</button>
<div id="div-1">
</div>
<script>
function constructElement() {
var elem = document.createElement("h6");
elem.innerText = "Dynamically added text."
document.getElementById("div-1").appendChild(elem);
}
</script>
</body>
<header>
<meta charset="utf-8">
</header>
<body>
<button onclick="constructElement()">click</button>
<div id="div-1">
</div>
<script>
function constructElement(){
var elem = document.createElement("h6");
elem.innerText= "Dynamically added text.";
document.getElementById("div-1").appendChild(elem);
}
</script>
</body>
Set the text content of a node: node.innerText = text
function constructElement(){
var elem = document.createElement("h6");
elem.innerText ="Dynamically added text."
document.getElementById("div-1").appendChild(elem);
}
This is directly not your answer but the algorithm is very similar
https://stackoverflow.com/a/56489422/10941112
(For the part of modals please put your own elements)
In case you need further clarification feel free to ask as this is not your direct answer
Also sorry to say but the question is a duplicate of -
Dynamically creating HTML elements using Javascript?
I would like to know how to access a parent element when it doesn't have any identifier. Typically I want to do the following:
<td>
<a title="mySweetTitle"/>
</td>
Access the "td" using his "a" child to modify his properties.
you should use parentElement property https://developer.mozilla.org/en/docs/Web/API/Node/parentElement
example:
document.getElementById('your_id').parentElement
in your case you can use
document.getElementsByTagName('a')[0].parentElement
Maybe this could help you:
$("a").bind("click" , function(){
var parent = $(this).parent();
});
what you are looking for ist $(this).parent() look at my example
i hope it helps
$(document).ready(function() {
$('.test').on('click', function() {
$(this).parent().append("<button>test2</button>");
});
});
<!doctype HTML>
<html>
<head>
<title>Test Umgebung</title>
<meta charset="UTF-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
</head>
<body>
<div>
<button class="test">test</button>
</div>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<script>
function changetext(mypara)
{
mypara.innerHTML="Ooops!";
}
</script>
</head>
<body>
<script>var mypara = document.getElementById("para1");</script>
<h1 onclick="changetext(mypara)">Click this text to change the content of following paragraph</h1>
<p id="para1"> this is a paragraph I would like to change </p>
</body>
</html>
I would like to let user to click the heading to change the content of the paragraph, but I don't know the correct way of coding that. How to send the "mypara" parameter to myFunction() in HTML?
Your example almost works - the problem is when you execute this line:
var mypara = document.getElementById("para1");
The element you're refering to does not yet exist. You could fix it by just going inline:
<h1 onclick="changetext(document.getElementById('para1'))">...</h1>
Live example for this approach: http://jsfiddle.net/Gw5CG/2/
or perhaps just pass the id to the method:
<h1 onclick="changetext('para1')">...</h1>
and change the method to do the getElementById:
function changetext(mypara)
{
document.getElementById(mypara).innerHTML="Ooops!";
}
Live example for this approach: http://jsfiddle.net/Gw5CG/1/
The element doesn't exist yet when you're trying to get it.
Why not just get it in the event handler
<!DOCTYPE html>
<html>
<head>
<script>
function changetext() {
document.getElementById("para1").innerHTML = "Ooops!";
}
</script>
</head>
<body>
<h1 onclick="changetext()">Click this text to change the content of following paragraph</h1>
<p id="para1">this is a paragraph I would like to change</p>
</body>
</html>
I am a beginer to javascript.I want to create a div dynamically,and then i want to set a video tag inside that div.After that write this div inside of the body,the another need is that the all elements inside that body should not be visible.The only visible item must be that video.
Below code is my try.But it shows the p tag element when video play.
Please help me.. Thank you..
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript">
function dyna()
{
var dynaDiv = document.createElement("div");
dynaDiv.style.background = "red";
dynaDiv.style.color = "white";
dynaDiv.innerHTML = "<video autoplay><source type='video/mp4' src='video/BigBuck_converted.mp4'/></video>";
document.body.appendChild(dynaDiv);
}
</script>
</head>
<body onload="dyna();">
<p>demo</p>
</body>
</html>
Got the answer.i just added the bellow code
document.body.innerHTML="";
after
dynaDiv.innerHTML = "<video autoplay><source type='videos/mp4' src='videos/Wildlife.mp4'/></video>";
its worked properly as my need.. thanks alot.. :)
in my aspx page i have a div which contains simple html ,has some id(say 'datadiv')
using jquery i want to get the html of that div (entire div) into a JavaScript variable
how can it be done?
thank you.
var someVar = $("#somediv").html();
If you want the equivalent of Internet Explorer's outerHTML to retrieve both the div and it's contents then the function from this page that extends JQuery should help:#
jQuery.fn.outerHTML = function() {
return $('<div>').append( this.eq(0).clone() ).html();
};
Then call:
var html = $('#datadiv').outerHTML();
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<b>Hello</b><p>, how are you?</p>
<script>
$("b").clone().prependTo("p");
</script>
</body>
</html>
**Out put:**
Hello
Hello, how are you?
Finally got it working..!! the simplest way !! HTML Code
<div class="extra-div">
<div class="div-to-pull-in-variable">
// Your Content Here
</div>
</div>
JQuery Code
$(function() {
var completeDiv = $('.extra-div').html();
alert(completeDiv);
})
});