Develop Reference

How to generate a rendering of a preview snippet with both image and text like Facebook displays

I would like to generate something to display that looks like the Facebook app previews using plain javascript. I already have the image url, title, and description data. However, I have no idea where to start with rendering exactly like the following:
google maps preview
Usually, how do you accomplish this in javascript? Do you have to manually specify the CSS? I'd really appreciate any advice and resource suggestions. I'm very new to javascript and UI.

So our goal is something like:
<div class="containerDiv">
<img src="blah blah">
<div>
<div class="urlDiv">my.url.com</div>
<div class="titleDiv">My title</div>
<div class="descriptionDiv">My description</div>
</div>
</div>
You will of course need to style a bit. Your page typically loads a lot of css style sheets. To one of them, you can add the css that will style your new "component". As an example:
<style>
.containerDiv {
display:flex;
align-items:center;
border:solid 1px gray;
/* etc... */
}
.containerDiv > img { /*...style for the image...*/ }
/*...more styles...*/
</style>
My answer will not include the correct css. Learning css in depth by is itself long proccess, so be patient. Follow a good CSS tutorial in case you need it.
Let's go on. The next step is to render the above markup with js.
To achieve this with plain js, use the native functions:
1) document.createElement to create a new element. This returns a js object containing the html element representation. This is not appended yet to the document. It is not visible, not yet a part of the page.
2) You can manipulate this object using: setAttribute(). Attribute is everything that follows your tag name. For example, to set the src of an image call:
const myImg = document.createElement("img");
myImg.setAttribute("src", "https://my.cool/image.png"); //the image is still not visible, because we did not yet append it into the DOM...
3) We use innerHTML property and/or append child to add elements within other elements (you typically start by creating the outer most element, create each child one by one and call appendChild of the parent to add each child).
4) Once you are ready creating your whole element, append it anywhere you like in the document, and it will become visible:
const myCoolElement = document.createElement("div");
//do stuff
document.body.appendChild(myCoolElement); //this will put it at the end of the page
//or, alternativelly
document.querySelector(".myElement > #thatWillHost .my .newComponent").appendChild(myCoolElement); //to append it somewhere else.
As a side note, querySelector and querySelectorAll will be also useful functions to you. Using querySelector, you can append your new element anywhere in the page that you like.
As a conclusion, you can react and manipulate the document through js by using tha mentioned (and many more) functions that are available out-of-the-box in every browser.

JavaScript: backgroundImage isn't changing with onMouseOver

I'm pretty new to JavaScript, and I'm trying to figure something out. I have a series of images within a table, and I'd like each image to display within a div element when you hover over one. The problem is, the code doesn't appear to be doing anything. I hover over the div element, and no changes are being made to the #bigdisplay element. If I replace the backgroundImage with a property such as color, it works completely fine. What am I doing wrong? This is the code for my div element.
<div id="image1" onmouseover="document.getElementById('bigdisplay').style.backgroundImage='url('images/Slideshow1.png')';">
/* ... */
</div>
If I must provide any other code from my site I will (although I don't believe any of it is relevant). Any help would be greatly appreciated! Thank you!

Your code is fine. I separated the js just to make it easier to read. Your problem is either you have no height to the div or your path is wrong
function test(){ document.getElementById('bigdisplay').style.backgroundImage=
'url("https://res.cloudinary.com/rss81/image/upload/gw.jpg")'}
html,body,div{
height:100%;
}
<div id="bigdisplay" onmouseover="test()">
test
</div>

You're not properly escaping the string in the attribute. Attach the listener in Javascript instead, rather than in HTML attributes (which is as bad as eval) and it'll be easier to read and write:
const bigdisplay = document.querySelector('#bigdisplay');
document.querySelector('#image1').addEventListener('mouseover', () => {
bigdisplay.style.backgroundImage = "url('images/Slideshow1.png')";
});

I think one problem is that you used single quote to quote 'images/Slideshow1.png'. But you used single quote also for 'url('images/Slideshow1.png')'. So there is a conflict. Try 'url("images/Slideshow1.png")'. A part for this I find better to define the event handler function in the js document linked to the html document.

TinyMCE - How to insert content at specific position

This is my try.
tinymce.init({
...
});
var frame2 = '<p><div>some text<div/></p>';
tinymce.execCommand('mceInsertContent',false,frame2);
out put view on preview
<div>some text</div>
As you can see the output is wrong. The desired output is below, which is p tag wraps div which wraps the text.
<p><div>some text<div></p>
What am I missing here?

Try this:
var frame2 = '<p><div>some text</div></p>';
You are not closing the div tag properly. I think that's the problem which is giving you wrong output.
Also, it's good to wrap 'p' tag inside 'div' instead of 'div' inside 'p'. So if its suits your need in this case, use following:
var frame2 = '<div><p>some text</p></div>';

Using jQuery to manipulate the final view seems to be a more elegant solution and easier. Better give up dealing with the editors.

CSS doesn't work after div id swap with js

Im trying to keep css working after swapping div id with js replace. I can't really figure it out i don't know what's wrong at all. Actually it's so simple that i don't even know what to think ...
<style>#WD4 { color:red; }</style>
<div id="60b0b9b1">qww4t</div>
<script>var x = document.body.innerHTML;x = x.replace('60b0b9b1', 'WD4');</script>
I just want color to apply. Im sure there's even more than one way around I just can't get it.
Big thanks in advance.
I actually forgot a few important things:
There are more than just one divs with 'WD4' ID
I can't edit document i can only inject my javascript code
I can't edit styles either

You can find the element by id:
document.getElementById("60b0b9b1").id = 'WD4';
FIDDLE
And your css is looking for #WD3 not #WD4

looks like you need to adjust your style to #WD4
Personally I would just add a css class to the element and not style the unique ID of the element.

Are HTML allowed inside HTML attributes?

For example, lets say you have something like this:
<div data-object="{'str': '<h1>This is a nice headline</h1>'}"></div>
Is this allowed in HTML5 and will it render properly in all browsers?
Edit:
With properly I mean that the browser will ignore and NOT render the H1 in any way ;)

Yes, it's allowed as long as it's quoted correctly.
Will it render? The H1 element? No - because it's not an element, it's just a bit of text inside an attribute of the div element.

Yes, browsers won't render any HTML tags inside attributes. This is pretty much common when you want to move the element later so it would show up. The only problem is that this is not a way to go as this does not create an element in DOM, thus, it will be much slower.
Try to find a way or ask for an alternative/better way to reuse the element which is hidden when the page is loaded.

Yes it's allowed and possible, but to make it work you have to make it valid JSON by using double quotes:
<div data-object='{"str": "<h1>This is a nice headline</h1>"}'></div>
Now to parse it just have: (jQuery will parse it to JSON all by itself)
var element = $("div").eq(0);
var rawData = element.data("object");
var rawHTML = rawData["str"];
$(rawHTML).appendTo("body");
Live test case.