Adding selected number of divs inside another div - javascript

Im trying to create an app that will roll number of dice decided by the user.
I want every dice to be in a separate div but I struggle to implement a code inserting divs into HTML.
As a test I created a button that would insert a single div into another div, here is what I got so far:
<div id="diceTable">
<button onclick="addDice()">Add Dice</button>
</div>
JS being:
function addDice(){
var div = document.createElement('div');
div.innerHTML = "<p> here will be a dice</p>";
div.getElementById('dice').appendChild(div);
}
But it doesnt seem to work. Maybe im using wrong methods.

Small typo - use document.getElementById('dice').appendChild(div) instead of div.getElementById('dice').appendChild(div).
function addDice() {
var div = document.createElement('div');
div.innerHTML = "<p> here will be a dice</p>";
document.getElementById('dice').appendChild(div);
}
<div id="diceTable">
<button onclick="addDice()">Add Dice</button>
</div>
<div id='dice'></div>

This is straight out of W3C school https://www.w3schools.com/jsref/dom_obj_div.asp
<script>
function myFunction() {
var x = document.createElement("DIV");
var t = document.createTextNode("This is a div element.");
x.setAttribute("style", "background-color: pink;");
x.appendChild(t);
document.body.appendChild(x);
}
</script>
Use append.child rather than innerHTML

Related

How can I write down paragraphs in HTML with Javascript without the use of getElementbyId?

So, i was working on this little formatting experiment with HTML, where you could create a paragraph via input and it would create an HTML paragraph on the screen. I did it by doing this.
HTML:
<button onclick="create_para()">Create Paragraph</button>
<p id="p1"></p>
Javascript:
function create_para(){
var p = window.prompt("Enter paragraph text: ");
document.getElementById("p1").innerHTML = p;
}
And, it worked! The only problem is that I wanted it so you could click the button again and again and it would create new paragraphs without replacing the old one. The only way I thought I could do it would be by making a bunch of tags with different classes, and having a bunch of functions, and a lot of buttons, but that's inefficient and too complicated.
So, I found out about document.write() and document.writeln(). So I used it in my code, but turns out it just deletes all other HTML code and just leaves it with the lines I wrote.
Therefore, is the a form of writing down paragraph lines without the use of ID's, or a form where it wouldn't delete all HTML code?
Thanks.
You can do something like:
function create_para(){
var p = window.prompt("Enter paragraph text: ");
var elem = document.createElement('p');
elem.innerText = p;
document.body.appendChild(elem)
}
EDIT: to add an id to each, you can add a global counter variable.
var i = 0;
function create_para(){
var p = window.prompt("Enter paragraph text: ");
var elem = document.createElement('p');
elem.innerText = p;
elem.id = '' + i;
i++;
document.body.appendChild(elem);
}
You can create a div container and then creates HTML Elements dinamically with your function, also you can assing an id to your new element, try this:
let div = document.getElementById('container');
function create_para(){
let p = document.createElement('p');
let txt = window.prompt("Enter paragraph text: ");
p.textContent = txt;
p.id = 'your id';
div.appendChild(p);
}
<div id='container'></div>

Creating div on button click with Javascript not working?

I have a button in a webpage that is linked to a Javascript function, which creates a div as follows:
function creatediv(){
var div = document.createElement('div');
div.innerHTML = document.getElementById('innerhtmlbox').value;
document.body.appendChild(div);
}
However, it is not working. Can anyone give me any advice?
Try this:
function createDiv() {
let div = document.createElement('div');
div.innerText = document.getElementById('getText').innerText;
document.body.appendChild(div);
}
<button onClick="createDiv()">Click me!</button>
<div id="getText" style="display: none;">
INNER TEXT
</div>
You need to use innerText
function creatediv() {
var div = document.createElement('div');
div.innerHTML = document.getElementById('innerhtml').textContent;
document.body.appendChild(div);
}
creatediv();
http://jsfiddle.net/e8jn9pj5/3/
Or if you are populating it from button's value you may use .value as suggested by adeneo http://jsfiddle.net/t4c5yq24/

How do you use Javascript to add or remove HTML/CSS code?

If I have a bunch of HTML code, similar to the following:
<div id='test0div'>
<p id='test0'></p>
</div>
How do I use JavaScript to add or remove more of those - i.e.
<div id='test1div'>
<p id='test1'></p>
</div>
<div id='test2div'>
<p id='test2'></p>
</div>
...etc.?
var container = document.createElement("div");
for(var i=0; i<5; i++) { // change i <5 as per your data source
var div = document.createElement("div");
var p = document.createElement("p");
p.id = "test"+i;
div.id = "test"+i+"div";
div.appendChild(p);
container.appendChild(div); // you can event append to particular id or body
}
// document.getElementById("divId").appendChild(container);
container, will have all the divs & p as you wish
This will give you the output you want. Just change the number of times the loop will execute based on your wish.
To remove you could use
$('#id').remove();
To add you could use
$("<div id='new'></div>").appendTo('#id');

Dynamic div containing selected text inside another div

I have a div element. I will copy-paste some text in this div. Then, upon clicking a create button, another div will be created inside the div with the selected text inside it. The new div will have a different background-color, different fonts, and other style properties. But my code isn't working. Please help me to figure out the mistakes. Thanks!!
<html>
<head>
<title>select</title>
<style>
</style>
</head>
<body>
<script>
function changeit(){
var slctn = document.getSelection();
var strings = slctn.toString();
alert(strings);
var get_id = document.getElementById("myspace");
var elem = document.createChild("div");
var design = document.createAttribute("style");
design.value = "background-color:white;color:red;font-weight:bold;font-style:italic;font-family:CURSIVE;";
elem.setAttributeNode(design);
elem.createTextNode(now);
get_id.appendChild(elem);
alert("it is done");
}
</script>
<div contenteditable="true" width="400px" height="500px" style="background-color:pink;display:block;" id="myspace">ddd</div>
<input type="button" value="select" onClick="changeit();">
</body>
</html>
For create div element you should use
var elem = document.createElement("div");
instead of
var elem = document.createChild("div");
And createTextNode is performed over document something like
document.createTextNode('now');
Working DEMO
<script>
function changeit(){
var slctn=document.getSelection();
var strings=slctn.toString();
alert(strings);
document.getElementById("myspace").appendChild('<div style="background-color:white;color:red;font-weight:bold;font-style:italic;font-family:CURSIVE;">'+document.getElementById("myspace").innerHTML+'</div>');
}
</script>
Works?

Search and Replace within DOM node in JavaScript

I'm creating a form and would like to be able to duplicate certain DIVs as needed using javascript. However, I need to replace multiple instances of a certain piece of text. Something like this with the comment replaced by functional code:
<body>
<div id="duplicate">
<p>Section_1 of form</p>
Add A Section
</div>
<script type="text/javascript">
<!--
var num_sections = 1;
function add_section()
{
var orig_div=document.getElementById("duplicate")
var copy_div=orig_div.cloneNode(true);
//Change every "Section_1" in copy_div to "Section_"+num_sections
footer = document.getElementById("footer");
document.body.insertBefore(copy_div,footer);
}
//-->
</script>
<div id="footer"></div>
</body>
Using JavaScript, what is an elegant way to replace every instance of Section_1 when these instances are in every input tag within the section ?
I'm working within the confines of a CMS so I can't implement it using a more powerful processing language.
You can call getElementsByTagName on a DOM node to fetch some elements group identified by the tag.
var num_sections = 1;
window.add_section = function() {
var orig_div=document.getElementById("duplicate")
var copy_div=orig_div.cloneNode(true);
//Change every "Section_1" in copy_div to "Section_"+num_sections
num_sections++;
var p = copy_div.getElementsByTagName('p')[0];
p.innerHTML = p.innerHTML.replace('Section_1', 'Section_' + num_sections);
var footer = document.getElementById("footer");
document.body.insertBefore(copy_div,footer);
};
Here's jsFiddle

Categories