Добавьте тег <a>между тегами <p>

Question

Я хотел вставить тег a между тегами p, используя угловой способ или чистый JavaScript без использования какой-либо библиотеки.

<p>Hello Welcome! Click here for more details</p>

Я пытался использовать приведенный ниже код,

  const anchor = this.renderer.createElement('a');
  const atext = this.renderer.createText('Click here');
  this.renderer.appendChild(anchor,atext);
  this.renderer.setAttribute(anchor,'href','#');
  this.renderer.appendChild(this.test.nativeElement,anchor);

С помощью приведенного выше кода я мог бы создать тег a, но не смог заменить текст Click here в теге p.

Я не знаю, как вставить промежуточный абзац, так как мне этого добиться?Пожалуйста, помогите

Примечание: - Я ищу ответ без использования [innerHTML] или DomSanitizer

Answer 1

в угловых, если вы хотите использовать тег, вы должны использовать угловую маршрутизацию, потому что этот тег отправляет ваши веб-страницы по определенному вами маршруту.Ваша проблема заключается в том, что сначала вы должны добавить модуль маршрутизатора в модуль приложения, затем в HTML-код, где вы используете тег, вы должны использовать атрибут routerLink, чтобы указать маршрут назначения страницы, и что более важно, вы никогда не должны использовать # дляназначение, потому что если вы хотите использовать чистый javascript и использовать # для href, вся веб-страница возвращается к домашнему компоненту.итак результат:

 1. never use href and pure javascript mode , to navigate in angular application.
 2. never use # for your routing destination.
 3. use routerLink instead of href

Answer 2

Вот пример добавления тега в абзац.

<p id="p">Hello Welcome! Click here for more details</p>
<script>
  let p = document.querySelector("#p");
  let a = document.createElement("a");
  let text = document.createTextNode("Click here");
  a.setAttribute("href", "#");
  a.appendChild(text);
  p.appendChild(a);
</script>