hoe kan ik h1 tag toevoegen?

Overzicht Reageren

Sponsored by: Vacatures door Monsterboard

Ventilatiesysteem Productontwikkelaar HBO WO Verwa

Samengevat: Zij bieden flexibele ventilatiematerialen, geluidsdempers, rookgasafvoer producten en industrieslangen. Ben jij een technisch productontwikkelaar? Heb jij ervaring met het ontwikkelen van nieuwe producten? Vaste baan: Technisch Productontwikkelaar HBO WO €3.000 - €4.000 Zij bieden een variëteit aan flexibele ventilatiematerialen, geluiddempers, rookgasafvoer producten, industrieslangen en ventilatieslangen voor de scheepsbouw. Met slimme en innovatieve materialen zorgen wij voor een gezonde en frisse leefomgeving. Deze werkgever is een organisatie die volop in ontwikkeling is met hardwerkende collega's. Dit geeft goede ontwikkelingsmogelijkheden. De branche van dit bedrijf is Techniek en Engineering. Functie: Voor de vacature als Technisch Productontwikkelaar Ede Gld HBO WO ga

Bekijk vacature »

Paul Weiss

Paul Weiss

12/10/2023 17:05:01
Quote Anchor link
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.


Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
<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>
 
PHP hulp

PHP hulp

06/12/2024 21:33:04
 
- SanThe -

- SanThe -

12/10/2023 17:52:47
Quote Anchor link
el.outerHTML = '<h1 style="align:center;" class="kleur1">' + el.innerHTML + '</h1>';
 
Paul Weiss

Paul Weiss

12/10/2023 18:07:46
Quote Anchor link
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

Ivo P

12/10/2023 22:05:26
Quote Anchor link
wat moet het worden? Dit?

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

Toevoeging op 12/10/2023 22:08:28:

Dat zou worden:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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>


Toevoeging op 12/10/2023 22:18:51:

maar misschien wil je van het element ook nog de id en de class behouden?
Gewijzigd op 12/10/2023 22:17:51 door Ivo P
 
Paul Weiss

Paul Weiss

12/10/2023 22:40:21
Quote Anchor link
het zou i.d.d. dit moeten worden.

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
<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.
Gewijzigd op 15/10/2023 11:44:49 door - Ariën -
 
Jan R

Jan R

13/10/2023 07:42:48
Quote Anchor link
waarom niet simpelweg
Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!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

Ivo P

13/10/2023 10:28:42
Quote Anchor link
Regel 11 zou moeten zijn:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
   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.
 
Paul Weiss

Paul Weiss

13/10/2023 13:09:51
Quote Anchor link
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?
Gewijzigd op 15/10/2023 11:44:20 door - Ariën -
 
Ivo P

Ivo P

14/10/2023 21:13:42
Quote Anchor link
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
 
Paul Weiss

Paul Weiss

15/10/2023 11:12:44
Quote Anchor link
ja maar dan blijft de styling en classes niet behouden toch?

Edit:
Ik heb een aantal berichten ingesnoeid van wat quotes omdat het niet nodig is om het eerst voorgaande bericht integraal te quoten. Zo blijft het topic beter leesbaarder.
Alvast bedankt!
Gewijzigd op 15/10/2023 11:48:35 door - Ariën -
 
Ivo P

Ivo P

17/10/2023 22:04:15
Quote Anchor link
nieuwe versie die ook class en style meepakt:

Code (php)
PHP script in nieuw venster Selecteer het PHP script
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<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>
 
Paul Weiss

Paul Weiss

18/10/2023 12:56:13
Quote Anchor link
dat is een goede oplossing inderdaad. had ik nog niet aan gedacht. super bedankt.
 



Overzicht Reageren

 
 

Om de gebruiksvriendelijkheid van onze website en diensten te optimaliseren maken wij gebruik van cookies. Deze cookies gebruiken wij voor functionaliteiten, analytische gegevens en marketing doeleinden. U vindt meer informatie in onze privacy statement.