Блог

У меня есть HTML-код, и я хочу заменить что-то с помощью JavaScript.

 <div class="maindiv">
    <div class="childdiv">
        <a href="www.abc.com" rel="prev">Old Text</a>
    </div>
</div>
  

Теперь я хочу изменить «Старый текст» на другой, похожий на «Новый текст».

Пожалуйста, дайте мне знать, если это возможно.

Вы должны найти свой элемент element внутри DOM, было бы лучше использовать class свойства or / id and .

Но в случае, если вам не разрешено редактировать DOM, вам нужно найти способ найти требуемый элемент, например, пересечение родительских элементов, у которых есть id или class .

1. Получите первый элемент с помощью этого класса childdiv .
2. Получите первый a тег внутри найденного выше элемента.
3. Установите innerHTML для найденного элемента в требуемое значение exp: New Text .

Javascript (как вы просили)

 <div class="maindiv">
    <div class="childdiv">
        <a href="www.abc.com" rel="prev">Old Text</a>
    </div>
</div>
<script>
document.getElementsByClassName("childdiv")[0].getElementsByTagName('a')[0].innerHTML="New Text";

</script>  

Jquery (та же логика, что и выше)

 $(document).ready(function(){
  $(".childdiv a").text("New Text");
})  

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div class="maindiv">
    <div class="childdiv">
        <a href="www.abc.com" rel="prev">Old Text</a>
    </div>
</div>  

Вы просто используете document.getElementById("my-link").innerHTML = "New Text" , но вы должны поместить id атрибут в свой <a> тег следующим образом:

 <a id="my-link" href="www.abc.com" rel="prev">
   ^^^^^^^^^^^^
  

Или, если вы не хотите ничего редактировать в своем исходном HTML (плохая практика):

 document.getElementsByTagName("a")[0].innerHTML = "New Text";
  

Вы можете получить доступ к такому объекту DOM, используя

 document.getElementsByClassName("childdiv")[0].childNodes[1].textContent="Updated Text";
  

Я не совсем понимаю вашу проблему, но я пробовал это, и это работает…

 <div class="maindiv">
   <div class="childdiv">
      <a href="www.abc.com" class="link" rel="prev">Old Text</a>
   </div>
</div>
  

и jQuery

 $(".link").click(function(e){
   e.preventDefault();
   $(this).text("New Text");
});
  

https://jsfiddle.net/294m3my6/

Если вы хотите JavaScript

 <div class="maindiv">
   <div class="childdiv">
      <a href="www.abc.com" id="link" rel="prev">Old Text</a>
   </div>
</div>
  

И JS

 function Action(evt) {
    evt.preventDefault();
    document.getElementById("link").innerHTML = "Next Text";
}

document.getElementById('link').addEventListener(
    'click', Action, false
);
  

https://jsfiddle.net/ep3v5u0k/

@Amani решил мою проблему. Это то, что я хотел.

 <div class="maindiv">
<div class="childdiv">
    <a href="www.abc.com" rel="prev">Old Text</a>
</div>
</div>
<script>
document.getElementsByClassName("childdiv")[0].getElementsByTagName('a') [0].innerHTML="New Text";
  

Большое вам всем спасибо, особенно Амани.