Is it possible to generate the DOM code from the HTML code? - javascript

I need to dynamically create element using DOM. I know how to do it using document.createElement, appendChild methods, but this is often a long process.
Suppose that I want to add this in my HTML page :
<div id="my_account" style="visibility:hidden">
<input id="my_account_close" type="submit" value="Close" onclick="closeMyAccount();">
<span id="my_account_username">Blabla</span>
<input id="my_account_username_modify" type="submit" value="Change Name" onclick="modifyUserName();">
<span id="my_account_email">a#asqs.com</span>
</div>
Do I have to create each element one by one and set all attributes, then use the appendChild methods ?
Is there a "magic" function that can take the html code which returns the parent element, so that I only have to add it at the end?

no, you can just take that entire string and add it as innerHTML to a parent div.
It will be part of the dom on the very next line of code...
someParent.innerHTML = myHTMLString;
var d = document.getElementById('my_account');//this will return the first object in your code

You can use the innerHTML function:
document.getElementById(element_id).innerHTML="<p>someHtml</p>";
Please notice JS does NOT support multiline strings.

Yes, there is a "magic" library called jQuery: http://api.jquery.com/append/
$("div").append("<div class='aaa'>Example</div>");

Related

Cannot manage to change the inner html of a div element

I cannot manage to change the inner html of a div element
<div class="emoji-wysiwyg-editor form-control" data-id="83fa07d0-2bab-4c02-8bb6-a2133ae64bbd"
data-type="input" placeholder="Chat Message" contenteditable="true" id="chatMessageSurrogate"
data-toggle="tooltip" data-placement="top" data-title="Please input a message within 300
characters." autocomplete="off" style="height: 63px;">wafwafgz</div>
I've tried the following:
$(".emoji-wysiwyg-editor.form-control").val("Hello!")
document.getElementsByClassName(".emoji-wysiwyg-editor.form-control").innerHTML = "Hello!"
but none of them is working
$(".emoji-wysiwyg-editor.form-control").html("Hello!"); should work
as stated previously .html("hello") should work, but also, getElementsByClassName i believe only works on a single class name and returns and array, so the below should also work
$(".emoji-wysiwyg-editor.form-control").html("Hello!");
// or
document.getElementsByClassName("emoji-wysiwyg-editor")[0].innerHTML = "Hello!"
In your HTML code there are two different class "emoji-wysiwyg-editor" and "form-control". So you have to use any of one.
$(".emoji-wysiwyg-editor").html("Hello!");
$(".emoji-wysiwyg-editor .form-control").html("Hello!");
And you want to add html contents in DIV so you have to use html. val is use for input typt.
in pure JavaScript with the use of multiple class.
document.getElementsByClassName("emoji-wysiwyg-editor form-control")[0].innerHTML = "hello";
Using JS,
var a = document.querySelector('.emoji-wysiwyg-editor');
a.innerHTML = "Hello";

Extract body element without a particular child

Is there a way to extract body element without a particular child element in it?
For example, if I have:
<body>
<div id="id1" class="class1" />
<div id="id2" class="class2" />
</body>
, what I need to be extracted is:
<body>
<div id="id1" class="class1" />
</body>
Actually, I intend to use html2canvas library to make canvas element from a HTML code, but I don't want to include all body children in a canvas element.
If you retrieve a parent element then you also have to take all of its children too. A possible workaround in this case would be to select the body, clone it and then remove the unwanted child element, something like this:
var $bodyClone = $('body').clone();
$bodyClone.find('#id2').remove();
// use $bodyClone as needed here...
$('body').not("#id2").html();
or
$('body').not(".class2").html();
and this is for multiple
$( "div" ).not( ".someclass, #someid,.class").html()
hope it will help
you can use document.getElementById(id) to get one element
or getElementsByClassName(class) and then filter the returned array
Using better ids or classes could help you to avoid filtering at all, simply give all your canvases one class and replace them all.

How to access inner html element present in actual html via javascript

I need to get the object of second level html element in my page.
<html>
<div id="out">
jasoidjisa
<html>
<head>//This object
<div id="in">
hihisdhi
</div>
</head>
</html>
</div>
<script>
alert(document.getElementsByTagName('html'));
</script>
Help me to access this html element via js
HTML is a reserved tag name and so you can't use it in the manner in which you have used it here. Which particular value from above are you trying to get exactly ? It might make sense to use the <div> tag with a class or I'd to identify it instead. If you specify which value you are specifically looking to get I can write up a theoretical solution.
vsank7787 was totally correct. Maybe you could use iFrames instead of nested html inside a HTML document since html is a reserved keyword.

How to append just before the end of the BODY tag using JQuery [duplicate]

I have this HTML:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
</div>
and want to add more divs after the strong element to result:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>
I am trying this:
var row_str = '<div>content here</div>';
$('#region_North_America div:last').html(row_str);
However, there is no change to the html. This is probably so since there is no div within the element selected.
I know that the js is making it to this code because I can print the content of row_str to the console.
So, how can I get to the end of that container element to add the new items?
Thx.
Try:
$("#region_North_America").append(row_str);
using append().
Or:
$("<div>content here</div>").appendTo("#region_North_America");
To create the element on the fly, and place it in the document.
Using the appendTo method.
Your code will just place html in the last div within #region_North_America. Use the append function.
$("div.region-list").append(row_str);

getElementById returns allways null if i search for new created Element

i want to duplicate one element and then assign to new id and names. my aim is later i want find that element again. here is an example:
<div id="contDiv">
<div style="float:left"> filename </div>
<div style="margin-left: 323px"> playtime(in Sek.) </div>
<div id="tl_Einst" class="editor-field">
<select id="Medianames" onchange="change(this)" name="TL_Medianame">
<span class="field-validation-valid" data-valmsg-replace="true" data-valmsg- for="Filename"> </span>
<select id="playtime" class="playtime" name="playtime" disabled="">
</div>
<input id="More" type="button" onclick="Addfiles()" value="+">
</div>
in the runtime i duplicate the Element "tl_Einst" with its children. then the user changes the content of the combox then i read them and send them to the server. later i get an answer. so i call the GetelementById("newElementID"), but i get always null, if search for the new created element. what can i do?
thank you
marek
The proper syntax is:
var el = document.getElementById("newElementID");
Typically, # is for JQuery or other javascript frameworks, or as #Quention mentions below, can also be used with document.querySelector.
Where are you adding the element to the DOM? Could you include that code too?
Have you added it to the page?
getElementByID will only find an element in the DOM. You can either add it to the page or simply assign it to a variable.
var newElementID= document.createElement("p");
You can now find it in your code with newElementID even if it's not in the page.

Categories