Develop Reference

Javascript Mirror html object

Basically I have html with variables
html = `<div>${product.id}<img src="${product.src}"/></div>`
then I update the dom simply with
document.querySelector('.container').innerHTML = html;
so far so good, problem is the html contains images and everytime I update, the page flickers, I was thinking if there was a more unintrusive method to only update the changed values

Hide the images when appending to DOM, then toggle visibility when the image finishes loading. https://jsfiddle.net/ftpd9sxz/
function showImage() {
this.style.visibility = 'visible';
}
let product = {
id: 2,
src: "https://pbs.twimg.com/profile_images/1010263656456744960/bXOUw0hb_bigger.jpg"
}
let html = `<div>${product.id}<img src="${product.src}" style="visibility: hidden" /></div>`;
document.querySelector('.container').innerHTML = html;
document.querySelector('.container img').addEventListener("load", showImage);

Class model for html backend [duplicate]

I'm working on a flexible menu, that does not need to jump from page to page when clicking 'links'.
The JavaScript I use for that is as follows:
var inbox = document.getElementById("u-content-inbox");
var friends = document.getElementById("u-content-friends");
var agenda = document.getElementById("u-content-agenda");
var list = document.getElementById("u-content-list");
var news = document.getElementById("u-content-news");
var notes = document.getElementById("u-content-notes");
function Inbox() {
inbox.style.visibility='visible';
}
function Friends() {
friends.style.visibility='visible';
}
function Agenda() {
agenda.style.visibility='visible';
}
function List() {
list.style.visibility='visible';
}
function News() {
news.style.visibility='visible';
}
function Notes() {
notes.style.visibility='visible';
}
The div elements are like this:
<div id="u-content-inbox" style="visibility:hidden;">
Inbox
</div>
<div id="u-content-friends" style="visibility:hidden;">
Friends
</div>
Each div has a "u-content-x".
However, when I try to change the style attribute "visibility" to visible. It gives me the following error: Uncaught TypeError: Cannot read property 'style' of null
I'm not seeing what I'm doing wrong. Could somebody please bring clearance to me why exactly JavaScript, or rather, I fail to make it work?
Whenever I run a check on
if(!inbox) {
alert("Inbox div has not been found);
}
does not show the alert message.

Make sure you call your javascript after the document is loaded! I'm nearly certain you are trying to get element references before they exist in the dom. The best practices is to put all scripts just before the closing of the body tag.
<script src="some/path/to/file.js"></script>
</body>
If your scripts appear in the document before the elements do, you can put your code inside of this load event function:
window.addEventListener('load', function() {
//your code here
});
Just as a note on your code architecture, you could attach a class to each element and then do this:
var toMakeVisible = document.getElementsByClassName('some-class');
for (var i=0; i<toMakeVisible; ++i) {
var elem = toMakeVisible[i];
elem.style.visibility = 'visible';
}

How would I add this JS into a HTML page?

I've got this JS code, which should load another image if the one it tries to load first takes too long:
var image = new Image();
image.src = "firstimage.jpg?cookie=" + encodeURI( document.cookie );
setTimeout
(
function()
{
if ( !image.complete || !image.naturalWidth )
{
image.src = "backupimage.jpg";
}
},
1000
);
I can't figure out how to put it into my HTML though (I only have VERY basic HTML skills!) Would anybody be able to show me?
Many thanks in advance

Assuming that you have added the Javascript on the page, you can inject the image to the body of the page using document.body.appendChild(image).
Or, if you wanted to inject the image into an element other than body, you could use element.appendChild(image).
var image = new Image();
image.src = "//placehold.it/300";
setTimeout
(
function()
{
if ( !image.complete || !image.naturalWidth )
{
image.src = "//placehold.it/200";
}
},
5000
);
document.body.appendChild(image);
// document.getElementById("myDiv").appendChild(image);
<div id="myDiv"></div>

HTML <script> tag
To add javascript or other scripts, use the <script> tags:
<script>
//code here
</script>
But do be aware that if any HTML elements are accesed with your JS, you must place the script after them so that they are loaded and exist (or use a delaying function on the document load).
Check the documentation

You can use the HTML <script> Tag.
The <script> tag is used to define a client-side script (JavaScript).
You use it like this:
<script>
//write your script here
</script>
Or create a function on load like this:
window.onload = function() {
yourFunction(param1, param2);
};

Don't load scripts appended with innerHTML?

I'm appending a whole HTML page to a div (to scrape). How do I stop it from requesting script, and css files ? I tried immediately removing those nodes but they still get requested.
It's for a browser addon, I'm scraping with JS

As #adeneo wrote you don't have to add the html to a page in order to scrape information from it, you can turn it into DOM tree that is disconnected from the page DOM and process it there.
In jQuery it is simple $("html text here"). Then you can scrape it using the API,
eg.
function scrape_html(html_string) {
var $dom = $(html_string);
var name = $dom.find('.name').text();
return name;
}
without jQuery:
function scrape_html(html_string) {
var container = document.createElement('div');
container.innerHTML = html_string;
var name = container.getElementsByClassName('name')[0].innerText;
return name;
}

Setting the innerHTML of a temporary HTML element that has not been added to the document, will not execute scripts, and since it does not belong to your document, the style will not be applied either.
This will give you an opportunity to strip out any unwanted elements before copying the innerHTML to your own document.
Example:
var temp = document.createElement('div');
temp.innerHTML = html; // the HTML of the 'other' page.
function removeElements(element, tagName)
{
var elements = temp.getElementsByTagName(tagName);
while(elements.length > 0)
{
elements[0].parentNode.removeChild(elements[0]);
}
}
removeElements(temp, 'script');
removeElements(temp, 'style');
removeElements(temp, 'link');
container.innerHTML = temp.innerHTML;

How to generate dynamic Image tags by jquery

I have fetched json through
<script>
function getjs()
{
var script =document.createElement("script");
script.setAttribute("type","text/javascript");
script.setAttribute("src","http://localhost:8080/vigs/f4json?user=3&callback=gr");
document.body.appendChild(script);
}
var i=0;
function gr(data)
{
for(i=0;i<data.size;i++)
{
document.getElementById('w').innerHTML =data.itemr[i].itmurl;
}
}
</script>
so, after fetching the urls it simply displays url of images in my div. I just confused how to write up code in jquery for same above task but also display images (by generating dynamix image tag appended to next one by one based on size in div) in my div with id mydiv.Or any alternative ?
your help would be appreciated..
thanks

Using JavaScript
function gr(data)
{
var w = document.getElementById('w');
for(i=0;i<data.itemr.length;i++)
{
var img = document.createElement('img');
img.src = data.itemr[i].itmurl;
w.appendChild(img);
}
}

$("<img>").attr("src", data.itemr[i].itmurl).appendTo($("#w"));