Question

I wanted to insert a a tag in-between p tag using angular way or pure javascript without using any library.

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

I tried with the below code,

  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);

With the above code, I could create the a tag but unable to replace the Click here text in the p tag.

for reference : https://stackblitz.com/edit/renderer2-example-2-vtbhfq?file=src/app/app.component.ts

我不知道如何在段落之间插入，如何实现？请帮助

注意：-我在寻找答案而不使用[innerHTML]或DomSanitizer

Answer 1

下面是在段落中添加标签的示例。

<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>

Answer 2

在angular中，如果要使用标签，则应使用角度路由，因为此标签会将您的网页发送到您确定的特定路由。您的问题是，首先应在应用程序模块中添加路由器模块，然后在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

添加<a> tag in between <p> tag

2 个答案: