hoe kan ik h1 tag toevoegen?

Door Paul Weiss op 12-10-2023 17:05

1.733 views

Ik wil graag van een element een h1 tag toevoegen. Kom er niet aan uit. Heb wel een werkend script, maar dan wordt de styling en evt. classes etc.. verwijderd. momenteel heb ik dus onderstaande script.


<html>
<h2 id="test1" style="align:center;" class="kleur1">deze tekst moet h1 worde</h2>
</html>
<script>

var el = document.querySelector('#test1');
        el.outerHTML = '<h1>' + el.innerHTML + '</h1>';

</script>

- SanThe -

12-10-2023 17:52

el.outerHTML = '<h1 style="align:center;" class="kleur1">' + el.innerHTML + '</h1>';

P Paul Weiss

12-10-2023 18:07

thx voor de reactie. Maar op deze manier gaat niet werken, aangezien ik niet altijd weet wat de styling en/of classes zijn. Ook is niet bekend of het huidige element h2,h3 etc.. is.

Ivo P

12-10-2023 22:05 gewijzigd op 12-10-2023 22:17

wat moet het worden? Dit?

<h1 id="test1" style="align:center;" class="kleur1">deze tekst moet h1 worde</h1>

[size=xsmall]Toevoeging op 12/10/2023 22:08:28:[/size]

Dat zou worden:


<html>
<h2 id="test1" style="align:center;" class="kleur1">deze tekst moet h1 worde</h2>

<button onclick="go()">
  klik
</button>

<script>
function go() 
{
  var e = document.getElementById('test1');
  var n = document.createElement('h1');

  n.innerHTML = e.innerHTML;
  e.parentNode.replaceChild(n, e);
}
</script>

</html>

[size=xsmall]Toevoeging op 12/10/2023 22:18:51:[/size]

maar misschien wil je van het element ook nog de id en de class behouden?

P Paul Weiss

12-10-2023 22:40 gewijzigd op 15-10-2023 11:44

het zou i.d.d. dit moeten worden.


<h1 id="test1" style="align:center;" class="kleur1">deze tekst moet h1 worde</h1>

Bedankt voor de geboden oplossing. Maar ik wil i.d.d. de id, styling en de classes etc.behouden.

Jan R

13-10-2023 07:42

waarom niet simpelweg

<!DOCTYPE html>
<html lang="nl">
	<head>
		<meta charset="utf-8">
        <title>Replacetest</title>
    </head>
    <body>
        <h2 id="h2" class="rood">Dit is een H2</h2>
    </body>
    <script>
        document.getElementById("h2");
        h2.outerHTML = h2.outerHTML.replace("<h2", "<h1");
    </script>
</html>

Ivo P

13-10-2023 10:28

Regel 11 zou moeten zijn:


   var h2 = document.getElementById("h2");

anders bestaat h2 niet op regel 2. En doordat de tagname en id allebeide h2 zijn, gaat het mogelijk in dit geval nog goed ook.
Alleen het gaat mis als je een ander id kiest.

P Paul Weiss

13-10-2023 13:09 gewijzigd op 15-10-2023 11:44

hoi ivo. bedankt voor je reactie. had het al gezien i.d.d. echter probleem is nu dat er wordt uitgegaan dat de huidige heading een h2 is, maar kan ook een h3 zijn. dat kan wisselen. enig idee hoe ik er een h1 van kan maken, onafhankelijk wat de huidige is?

Ivo P

14-10-2023 21:13

als het niet met zekerheid een <h2> is, dan is Jans script niet heel bruikbaar.

Dan zou je eerst moeten achterhalen welk soort element dat id had.

Dan zou ik gaan voor mijn oplossing van 12 oktober om 22:05

P Paul Weiss

15-10-2023 11:12 gewijzigd op 15-10-2023 11:48

ja maar dan blijft de styling en classes niet behouden toch?

Ivo P

17-10-2023 22:04

nieuwe versie die ook class en style meepakt:


<html>
  <h2 id="test1" style="align:center;" class="kleur1">deze tekst moet h1 worden</h2>

  <button onclick="go()">
    klik
  </button>

  <script>
  function go() {
    var e = document.getElementById('test1');
    var n = document.createElement('h1');
    var stijl = e.getAttribute('style');
    var klass = e.getAttribute('class');

    n.innerHTML = e.innerHTML;
    n.setAttribute('style', stijl);
    n.setAttribute('class', klass);

    e.parentNode.replaceChild(n, e);
  }
  </script>

</html>

Reageren

Inloggen om te reageren