innerHTML + write

- Crea un exemple al teu sandbox i demostra l’ús del mètode innerHTML() - Crea un exemple al teu sandbox i demostra l’ús del mètode document.write()

by merygarriga

HTML

<html>
<body>

<h1>INNERHTML and WRITE</h1>

<h2>innerHTML</h2>
<p>This is the easiest way to modify the ccontent of an HTML element.</p>
<button onclick="innerTest()">Aplicar innerHTML</button>
<p id="testInner">Text HTML</p>

<br>
<h2>write</h2>
<p>Can be used to write directly to the HTML output.<br><b>Never</b> use it <b>after</b> the document is <b>loaded</b>. It will <b>overwrite</b> the document.</p>
<p>Text escrit per document.write:<br>
<b><script>document.write(Date());</script></b>
</p>
<button type="button" onclick="tryWrite()">Try another write</button> <!-- Aquest millor evitar-lo, perquè sobreescriu tot el HTML-->

</body>
</html>

CSS

* {
    box-sizing: border-box;
}

body {
    font-family:  'Courier New', Courier, monospace;
    background: url(../imagenes/escut.png) repeat fixed 0px -81px;
    text-align: center;
    background-color: slategray;
}

h1 {
    font-size: 3em;
    color: #DED1A9;
}

h2 { 
  font-size: 2em;
  font-weight: bold; 
  font-family: Arial, Helvetica, sans-serif;
  color: #1A3651;
}

p {
  font-family: Arial, Helvetica, sans-serif;
  color: #B0B8BF;
}

button {
  background-color: #DEBAA9;
  border-radius: 12px;
  border: 1px solid #000000;
  color: #AD7960;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

button:hover {
  background-color: #AD7960;
  color: #7D3F21;
}

JavaScript

function innerTest() {
  document.getElementById("testInner").innerHTML = "Text després del inner.";
}

function tryWrite() {
  document.write("<h1>Hello World!</h1>");
}