Databases
StackOverflow2013
Postsdbo
PO
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    text
    copied!<p><code>Element.innerHTML</code> is pretty much the way to go. Here are a few ways to use it:</p> <h3>HTML</h3> <pre class="lang-html prettyprint-override"><code>&lt;div class="results"&gt;&lt;/div&gt; </code></pre> <h3>JavaScript</h3> <pre class="lang-js prettyprint-override"><code>// 'Modern' browsers (IE8+, use CSS-style selectors) document.querySelector('.results').innerHTML = 'Hello World!'; // Using the jQuery library $('.results').html('Hello World!'); </code></pre> <p>If you just want to update a portion of a <code>&lt;div&gt;</code> I usually just add an empty element with a class like <code>value</code> or one I want to replace the contents of to the main <code>&lt;div&gt;</code>. e.g.</p> <pre class="lang-html prettyprint-override"><code>&lt;div class="content"&gt;Hello &lt;span class='value'&gt;&lt;/span&gt;&lt;/div&gt; </code></pre> <p>Then I'd use some code like this:</p> <pre class="lang-js prettyprint-override"><code>// 'Modern' browsers (IE8+, use CSS-style selectors) document.querySelector('.content .value').innerHTML = 'World!'; // Using the jQuery library $(".content .value").html("World!"); </code></pre> <p>Then the HTML/DOM would now contain:</p> <pre class="lang-html prettyprint-override"><code>&lt;div class="content"&gt;Hello &lt;span class='value'&gt;World!&lt;/span&gt;&lt;/div&gt; </code></pre> <h3>Full example. Click run snippet to try it out.</h3> <p><div class="snippet" data-lang="js" data-hide="false" data-console="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>// Plain Javascript Example var $jsName = document.querySelector('.name'); var $jsValue = document.querySelector('.jsValue'); $jsName.addEventListener('input', function(event){ $jsValue.innerHTML = $jsName.value; }, false); // JQuery example var $jqName = $('.name'); var $jqValue = $('.jqValue'); $jqName.on('input', function(event){ $jqValue.html($jqName.val()); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>html { font-family: sans-serif; font-size: 16px; } h1 { margin: 1em 0 0.25em 0; } input[type=text] { padding: 0.5em; } .jsValue, .jqValue { color: red; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;script src="https://code.jquery.com/jquery-1.11.3.js"&gt;&lt;/script&gt; &lt;meta charset="utf-8"&gt; &lt;meta name="viewport" content="width=device-width"&gt; &lt;title&gt;Setting HTML content example&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;!-- This &lt;input&gt; field is where I'm getting the name from --&gt; &lt;label&gt;Enter your name: &lt;input class="name" type="text" value="World"/&gt;&lt;/label&gt; &lt;!-- Plain Javascript Example --&gt; &lt;h1&gt;Plain Javascript Example&lt;/h1&gt;Hello &lt;span class="jsValue"&gt;World&lt;/span&gt; &lt;!-- jQuery Example --&gt; &lt;h1&gt;jQuery Example&lt;/h1&gt;Hello &lt;span class="jqValue"&gt;World&lt;/span&gt; &lt;/body&gt; &lt;/html&gt;</code></pre> </div> </div> </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload