Próbuję zastąpić tekst mojego stopki za pomocą "Hello World" i nie chcę edytować HTML, dodając klasę lub identyfikator

HTML:

<footer>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </footer>

JavaScript:

document.getElementById(footer).innerHTML="Hello World";

Problem polega na tym, że kiedy wykonuję powyższy kod, nic się nie zmieni

-1
Erik Gesateifin 4 czerwiec 2018, 10:21

4 odpowiedzi

Najlepsza odpowiedź

footer nie jest identyfikatorem wybranego elementu, jego nazwa tag.

Możesz użyć selektora tag do wybierania stopki.

I zmienić zawartość div (zakładam, że chcesz zmienić tekst, utrzymywanie div tak jak jest), możesz wybrać div za pomocą selektora tagów

I może zmienić tekst.

document.getElementsByTagName("footer")[0].getElementsByTagName("div")[0].innerHTML = "Hello World";

Powyższe stwierdzenie jest podzielone:

document.getElementsByTagName("footer") //select footer

document.getElementsByTagName("footer")[0] //1st matched element

document.getElementsByTagName("footer")[0].getElementsByTagName("div") // select div

document.getElementsByTagName("footer")[0].getElementsByTagName("div")[0] // first div

document.getElementsByTagName("footer")[0].getElementsByTagName("div")[0].innerHTML = "Hello World"; //change content
document.getElementsByTagName("footer")[0].getElementsByTagName("div")[0].innerHTML = "Hello World";
<footer>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </footer>
2
Himanshu Tyagi 4 czerwiec 2018, 08:32

Jest kilka sposobów, dzięki którym możesz osiągnąć pożądany:

1) Jeśli chcesz zmienić HTML, należy użyć poniższego kodu do kierowania footer:

document.getElementsByTagName('footer')[0].innerHTML = '<div>Hello World</div>';
document.getElementsByTagName('footer')[0].innerHTML = '<div>Hello World</div>';
<footer>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
</footer>

2) Jeśli chcesz po prostu zmodyfikować tekst, bez zmiany HTML, można również korzystać z następujących elementów:

document.getElementsByTagName('footer')[0].innerText = 'Hello World';
document.getElementsByTagName('footer')[0].innerText = 'Hello World';
<footer>
  <div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit.
  </div>
</footer>

Różnica między dwoma podejściami polega na tym, że poprzedni utrzymuje tekst wewnątrz div, podczas gdy ten ostatni utrzymuje się w samym znaczniku footer.

Jeśli spojrzysz przez inspekcję w dwóch, będzie miał wyjście jak poniżej:

1)

<footer>
    <div>
        Hello World
    </div>
</footer>

2)

<footer>
    Hello World
</footer>
0
Shashank 4 czerwiec 2018, 07:56

To dlatego, że wybierasz identyfikator, który nie istnieje, spróbuj tego zamiast tego:

document.querySelector('footer').innerHTML = "Hello world";

@edytować

document.querySelector('footer').innerHTML = "Hello world";
<footer>
    <div>
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </footer>
2
aMJay 4 czerwiec 2018, 07:26

Dołącz skrypt JS za pomocą tagu, ale upewnij się, że skrypt został wcześniej załadowany. Przykładowy znacznik (zastąp frazę z nazwą rzeczywistego folderu JS):

<footer>
 ...
   <script type="text/javascript" src="<YOUR-JS-FOLDER>/text.js"></script>
</footer>
0
Owais Alam 4 czerwiec 2018, 09:41