Develop Reference

What is the difference between these two blocks of JavaScript code?

Here's the code:
<form action="">
<input type="text" id="new_task" placeholder="Write New Task" required>
<input type="button" value="Add Task" id="add_task">
</form>
<div id="task_list">
</div>
Code 1:
document.getElementById("add_task").addEventListener("click",function(){
let new_task = document.getElementById("new_task").value;
document.getElementById("task_list").append(document.createElement("p").textContent=new_task);
});
Code 2:
document.getElementById("add_task").addEventListener("click",function(){
let new_task = document.getElementById("new_task").value;
let task_div = document.getElementById("task_list");
let task_p = document.createElement("p");
task_p.textContent = new_task;
task_div.append(task_p);
});
What is the difference between the two blocks of code?
I am trying to make a todo list website.
The first piece of code was appending the value from input inside the div but not creating p tag.
The second piece of code worked perfectly.
I want to know the difference.

The significant difference is this section of code block 1:
.append(document.createElement("p").textContent=new_task)
This does in fact create a <p> tag but it is not appended to the document yet. When you set the text content on this new <p> tag, that expression evaluates to the string new_task, so it's the same as saying
.append(new_task)
which is definitely not what you want.
The full expanded version of what code block 1 is essentially doing is:
document.getElementById("add_task").addEventListener("click",function(){
let new_task = document.getElementById("new_task").value;
let task_div = document.getElementById("task_list");
let task_p = document.createElement("p");
task_p.textContent = new_task;
task_div.append(new_task);
// different from:
// task_div.append(task_p)
});

Create H1 element in div jQuery

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>

get html from a variable by id

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();

javascript in html

i am using javascript to change the text of div tag on run time.
how can this be done..
my div tag is as:
<div id="topdiv" style="color:Blue" onmouseover="button1();">
<input type="button" id="btndiv" onclick="edit1();"/>
Div Tag
</div>
i wnt the user to input text on runtime in div and that should be displayed in div.
can someone help me..

It should be innerHTML. innerHTM is not a javascript function.

You don't get a magic variable just by having an element with an id. var something = document.getElementById('some-id')
The property is called innerHTML not innerHTM
innerHTML is a string variable not an function. Assign a value to it with =, don't try to call it with ()

function edit1() {
alert('you are in edit1');
document.getElementById('topdiv').innerHTML = 'hello';
}
and with proper error handling:
function edit1() {
alert('you are in edit1');
var topDiv = document.getElementById('topdiv');
if (topDiv != null) {
topDiv.innerHTML = 'hello';
} else {
alert('topdiv is nowhere to be found in this DOM');
}
}

Try document.getElementById('topdiv').innerHTML = "Hello"

To get the div you should use document.getElementById('topdiv'). There is indeed a WebKit feature, that elements with an ID are automatically expanded as global variables, but it's highly questionable, that this becomes mainstream.
Then, innerHTM should read innerHTML, and you assign directly:
foo.innerHTML = "hi there"

you should use
document.getElementById('topdiv').innerHTML = 'hello';

You should use references instead of ID's, using this.
In that case this means the node that triggers the event.
<div style="color:Blue" onmouseover="button1(this);">
<input type="button" onclick="edit1(this);"/>
Div Tag
</div>
function button1(divRef){
//divRef is the reference to the DIV
}
function edit1(inputRef){
//inputRef is the reference of the INPUT
//inputRef.parentNode is the reference to the DIV
}

function edit1() {
alert('you are in edit1');
document.getElementById('topdiv').innerHTML = 'hello';
}
This should work by specifying the id

In standard JavaScript usage you'd do as per #DarinDimitrov 's answer.
document.getElementById("topdiv").innerHTML = ('hello');
Once you're happy with JavaScript I would suggest you look at the JQuery libraries - the powerful syntax will let you write short, neat code like this:
$("#topdiv").html('hello');

Your file
<div id="topdiv" style="color:Blue" onmouseover="button1();"> Div Tag</div>
<form><input type="button" id="btndiv" value="Edit" onClick="window.open('t2.html','popuppage','width=850,toolbar=1,resizable=1,scrollbars=yes,height=700,top=100,left=100');" value="Open popup"/></form>
t2.html file
function sendValue (s){var selvalue = s.value;window.opener.document.getElementById('topdiv').innerHTML = selvalue;window.close();}
<form name="selectform"><input name="details" value=""><input type=button value="Copy input to parent opener" onClick="sendValue(this.form.details);"></form>
Got Idea from this source enter link description here

Remove <p class="classname"> in Javascript?

How can i remove this <p> tag with all its content in javascript?
say i have this html code
<p class="classname">
<input name="commit" value="Get Value" type="submit"> <span>or Cancel</span>
</p>
Now i need to replace/remove it in javascript, does anyone know how i can remove it?

Assuming you don't want to change the markup: The easiest way is to use a library. e.g. with jQuery:
jQuery('.classname').remove();
Otherwise, you need to get a reference to the element and then:
el.parentNode.removeChild(el);
Getting a reference to the element is the tricky part. Some browsers implement getElementsByClassName, but you'll have to write your own or use a third party implementation for the rest.
if (!document.getElementsByClassName) {
document.getElementsByClassName = function (className) {
/* ... */
}
}
If you are willing to change the markup, then give the element an id and use document.getElementById to get the reference to it.

If you have to do it in plain javascript it'll be painful because of Internet Explorer which doesn't support getElementsByClassName() (maybe in newer version ?).
var elems = document.getElementsByTagName('p');
var elemsLenght = elems.lenght;
for (var i = 0; i < elemsLenght; ++i) {
{
if (elems[i].className == 'classname')
{
elems[i].innerHTML = '';
}
}
But if you can, use a library/framework like jQuery, prototype, dojo, etc..

Try this:
<p id="someid">
<input name="commit" value="Get Value" type="submit"> <span>or Cancel</span>
</p>
function removeElement(id) {
var d = document.getElementById('myDiv');
var olddiv = document.getElementById(id);
d.removeChild(olddiv);
}
removeElement('someid');
With JQuery if you Want
$('p.classname').remove();