I want to a <h1></h1> element in a div element in HTML with jQuery. How do I do this?
function show() {
let text = "greetings"
let divElem = document.getElementById("hello");
divElem.innerHTML = '<h1>${text}</h1>'
}
<div id="hello"></div>
<button onclick="show()">show</button>
Basically, I want to make an h1 element in the div element which displays the string contained in the text variable, "greetings" how do I do this?
Do you need to ` instead of ' ?!
Also can read about it in this link : Template literals (Template strings).
function show() {
let text = "greetings"
let divElem = document.getElementById("hello");
divElem.innerHTML = `<h1>${text}</h1>`
}
<div id="hello"></div>
<button onclick="show()">show</button>
You can use the Jquery .html() method.
Also, you have to use backticks instead of quotes. (`) in order to use templating inside a "string". This is called Template literals. You can read more about them here
function show() {
let text = "greetings"
$( "#hello" ).html( `<h1>${text}</h1>` );
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="hello"></div>
<button onclick="show()">show</button>
Related
Hello I'm just starting to learn and I'm trying to write simple code to add text to a div box using java script but it gives me error query selector not defined
html code:
<h2>List of items</h2>
<input class="text" type="text" placeholder="write text"><br>
<input type="button" value="Add" onclick="addItem()">
<div class="list"></div>
java script code:
function addItem(){
let getText = querySelector("text").value;
let newText = document.createElement("div");
newText.innerHTML = document.appendChild("getText");
document.querySelector("list").appendChild("newText");
}
There are several issues in your code:
querySelector is a method of document object. It should be document.querySelector("selector").
document.appendChild expects a Node instance. You are passing a string.
You are missing . for the class selectors.
You should not wrap variables with "" when you are referring to them.
Here is the updated code:
function addItem() {
let getText = document.querySelector("input.text").value;
let newText = document.createElement("div");
newText.innerHTML = getText;
document.querySelector(".list").appendChild(newText);
}
use
document.querySelector("div.list").appendChild("newText");
instead of
document.querySelector("list").appendChild("newText");
I want to get the string inside "p" tag, when the string was changes i'll still able to get the latest string.
But I've no idea how to get the string from the "p" tag.
Tested few way including:
.text();
.val(); (i know it was reserve for input, just trying...)
.innerHTML();
My HTML:
<p id="testprint">Original String</p>
<p id="getString"> EMPTY </p>
<button id="Generate">Generate</button>
<button id="Change">Change</button>
<button id="getStr">Get String to first "p" tag</button>
My JavaScript:
function print1st(){
document.getElementById('testprint').innerHTML = "Generated New String";
}
function changeValue(){
document.getElementById('testprint').innerHTML = "Change String Success";
}
function getStrfrom1st(){
copystr = document.getElementById('testprint').text();
//copystr = document.getElementById('testprint').val();
//copystr = document.getElementById('testprint').html();
//copystr = document.getElementById('testprint').innerHTML();
document.getElementById('getString').innerHTML = copystr;
}
document.getElementById('Change').addEventListener('click',changeValue,false);
document.getElementById('Generate').addEventListener('click',print1st,false);
document.getElementById('getStr').addEventListener('click',getStrfrom1st,false);
Expecting Result:
Once clicked generate button generate new string, once click "Get String" button will get the result "Generated New String".
Else if i click 2nd button changed the first value, once i click 3rd button will get the changed string.
Here is my JSFiddle: https://jsfiddle.net/pxaw9xt4/1/
Please check your browser console, you could see the following error :
TypeError: document.getElementById(...).text is not a function
And that right .text() isn't a javascript function (the both text() & val() are jQuery methods), so you should use .innerHTML or .textContent like :
copystr = document.getElementById('testprint').innerHTML;
NOTE : The .innerHTML() method doesn't exist.
Hope this helps.
function print1st(){
document.getElementById('testprint').innerHTML = "Generated New String";
}
function changeValue(){
document.getElementById('testprint').innerHTML = "Change String Success";
}
function getStrfrom1st(){
copystr = document.getElementById('testprint').innerHTML;
document.getElementById('getString').innerHTML = copystr;
}
document.getElementById('Change').addEventListener('click',changeValue,false);
document.getElementById('Generate').addEventListener('click',print1st,false);
document.getElementById('getStr').addEventListener('click',getStrfrom1st,false);
<p id="testprint">Original String</p>
<p id="getString"> EMPTY </p>
<button id="Generate">Generate</button>
<button id="Change">Change</button>
<button id="getStr">Get String to first "p" tag</button>
Use this to get the textual content within an HTML DOM.
var copystr = document.getElementById("testprint").textContent;
Updated & working fiddle here.
Using Jquery You can use onmethod for adding click event to button and using #id selector we can get / set the text for the p tag
$('#Change').on('click', function()
{
$('#testprint').text('Change String Success');
});
$('#Generate').on('click', function()
{
$('#testprint').text('Generated New String');
});
$('#getStr').on('click', function()
{
$('#getString').text( $('#testprint').text() );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="testprint">Original String</p>
<p id="getString"> EMPTY </p>
<button id="Generate">Generate</button>
<button id="Change">Change</button>
<button id="getStr">Get String to first "p" tag</button>
You're confusing jQuery functions with vanilla JS. val() and text() are all functions defined in jQuery, and thus cannot be called on vanilla JS nodes. Since you've tagged this using jQuery, why not use jQuery for everything? Your entire snippet can be written as follows using on():
$('#Change').on('click', function() { $('#testprint').text('Change String Success'); });
$('#Generate').on('click', function() { $('#testprint').text('Generated New String'); });
$('#getStr').on('click', function() { $('#getString').text( $('#testprint').text() ); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="testprint">Original String</p>
<p id="getString"> EMPTY </p>
<button id="Generate">Generate</button>
<button id="Change">Change</button>
<button id="getStr">Get String to first "p" tag</button>
Alternatively, if you'd prefer to handle this using vanilla JS only, you can use the innerHTML property as follows:
function print1st() {
document.getElementById('testprint').innerHTML = "Generated New String";
}
function changeValue() {
document.getElementById('testprint').innerHTML = "Change String Success";
}
function getStrfrom1st() {
copystr = document.getElementById('testprint').innerHTML;
document.getElementById('getString').innerHTML = copystr;
}
document.getElementById('Change').addEventListener('click',changeValue,false);
document.getElementById('Generate').addEventListener('click',print1st,false);
document.getElementById('getStr').addEventListener('click',getStrfrom1st,false);
<p id="testprint">Original String</p>
<p id="getString"> EMPTY </p>
<button id="Generate">Generate</button>
<button id="Change">Change</button>
<button id="getStr">Get String to first "p" tag</button>
You can get the value the same way you set it
copystr = document.getElementById('testprint').innerHTML ;
Just use textContent.
Example :
var copystr = document.getElementById('testprint').textContent;
Here the updated JsFiddle
innerHTML shouldn't include brackets. Check the jsfiddle
copystr = document.getElementById('testprint').innerHTML;
https://jsfiddle.net/pxaw9xt4/7/
This is my code:
var turn = 1;
var boardPiece;
var piece = [];
function init() {
boardPiece = document.getElementById("pages");
while (boardPiece.firstElementChild) {
if (typeof boardPiece.firstElementChild.id != 'undefined') {
piece.push(boardPiece.firstElementChild);
}
boardPiece.removeChild(boardPiece.firstElementChild);
}
document.getElementById("content").innerHTML = piece[0]; //My problem is here
}
init();
<div id="content">
</div>
<div id="pages">
<div id="page1" class="page">
...
</div>
<div id="page2" class="page">
...
</div>
</div>
The result is a text
[object HTMLDivElement]
not an element.
What's wrong with my .innerHTML? And what is typeof piece[0]? Is it text?
You need to replace your:
document.getElementById("content").innerHTML = piece[0];
with:
document.getElementById("content").innerHTML = piece[0].innerHTML;
What you are trying to do atm is to insert element (which is an object) as a plain text.
You need to use the .innerHTML along with your piece[0] variable like,
document.getElementById("content").innerHTML = piece[0].innerHTML;
Working Fiddle: https://jsfiddle.net/gs0yy50t/
Hope this helps!
The issue is that the type of piece[0] is not a string, but a HTML element. For that reason, in order to assign it to the content's innerHTML (which is a string), JavaScript is implicitly calling the piece[0].toString() method.
When calling the toString() method in HTML nodes (like most non-string objects in JavaScript), it returns a string representing the type of the object.
If you need to add the element piece[0] as child of content, then you should do:
document.getElementById("content").innerHTML = piece[0].outerHTML;
However, if what you need is to copy the content of one element into another, you should use the property innerHTML instead:
document.getElementById("content").innerHTML = piece[0].innerHTML;
Basically, both properties are strings with the HTML code of the element but outerHTML includes the element itself in the root.
i have a variable name value in my javascript code that contain html data.i want to get the data inside form specific id that is inside #myDiv
var value="<div >
<p class="">Hi cname#gmail.com</p>
<br/>
<br/>
<br/>
<div id="myDiv">
sgdhsagdhagh
dhsajdgasj
cjzjcg
</div>
</div>"
Thanks
You should create a DOM element, then traverse up to it and get html() or .text()
var value = '<div >\
<p class="">Hi cname#gmail.com</p>\
<br/>\
<br/>\
<div id="myDiv">\
sgdhsagdhagh\
dhsajdgasj\
cjzjcg\
</div>\
</div>';
alert($(value).find('#myDiv').html())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
If you need to get parent element, then use
alert($('<div />', {html: value}).find('#myDiv').html())
How about you do like this?
var variable = "stuff n things";
document.getElementById( 'myDiv' ).innerHTML = variable;
Thats the native way :)
EDIT:
if you want to get the data you just do like this:
var variable = document.getElementById( 'myDiv' ).innerHTML;
That will give you the markup of whats inside the div.
Or use document.querySelector("#myDiv") to get the first match on the selector.querySelectorAll returns array.
You can use the HTML of the value variable to create an jQuery object. From this object you can search for the element with the id, and get its HTML content:
var html = $(value).find('#myDiv').html();
console.log(html); //sgdhsagdhaghdhsajdgasjcjzjcg
Or a pure javascript implementation:
var el = document.createElement('div');
el.innerHTML = value;
var html = el.getElementById('myDiv').innerHTML;
console.log(html); //sgdhsagdhaghdhsajdgasjcjzjcg
Using plain Javascriptuse:
document.getElementById("myDiv").innerHTML;
Using jQuery:
$("#myDiv").html();
There are Two ways- Angular way-
var elem = angular.element(value);
var innerDive=elem[0].getElementById('myDiv');
var text= angular.element(innerDive[0]).innerText;
Jquery-
var text= $(value).find('#myDiv').text();
<div id="content">
...
<p>NUMBER times...</p>
...
<p>Place N°: NUMBER</p>
</div>
How do I replace all NUMBER inside the content div?
I tried replace method but it didn't work.
Thanks.
You can use the standard Javascript replace function for strings.
oldhtml = $('div#content').html();
var newhtml = oldhtml.replace(/NUMBER/g, "123");
$('div.demo-container').html(newhtml);
You should iterate all your text nodes and replace the text inside them.
$('#content').children().each(function() {
var textNode = $(this);
textNode.text(textNode.text().replace("NUMBER", "NEW"));
});
This codes assumes all the children of #content just contain text.
Try this:
$('#content').children().each(function () {
$(this).html(function (i, html) {
return $(this).html().replace(/NUMBER/g, '123456');
});
});