添加链接元素<a>到段落<p>Javascript

Add Link Element <a> to paragraph <p> Javascript

本文关键字：gt lt Javascript 段落 链接 添加 元素      更新时间：2023-09-26

我试图向已经有文本的段落添加链接，但当我尝试时，这只是添加链接元素的文本，而不是实际的链接。href或<a>标记。这是html

<div id="main_div"></div>

这是Javascript

var temp_link = document.createElement("A");
temp_link.href = "http://test.com";
temp_link.target = '_blank';
var par = document.createElement("P");
par.innerHTML = "some text: " + temp_link;
<!--I have also tried this line below -->
<!--    par.insertAdjacentHTML('beforeend', '<div><a>' + url +'</a></div>' -->);
document.getElementById("main_div").appendChild(par);

我尝试了上面javascript中的两件事——它当前将运行的内容和注释掉的行，都没有附加链接，他们只是添加了我包含的文本JSFiddle。

如何添加它以使<a>链接？

您不能混合使用innerHTML和createElement。您需要将元素追加到段落中。

var temp_link = document.createElement("a");
temp_link.href = "http://test.com";
temp_link.target = '_blank';
temp_link.innerHTML = "link";
var par = document.createElement("p");
par.innerHTML = "some text: ";
par.appendChild(temp_link);
document.getElementById("main_div").appendChild(par);
<div id="main_div"></div>

或

var temp_link = document.createElement("a");
temp_link.href = "http://test.com";
temp_link.target = '_blank';
temp_link.innerHTML = "link";
var text = document.createTextNode("some text: ");
var par = document.createElement("p");
par.appendChild(text);
par.appendChild(temp_link);
document.getElementById("main_div").appendChild(par);
<div id="main_div"></div>

使用innerHTML作为链接名称和outerhtml以获得elemt 的完整html

var temp_link = document.createElement("A");    
temp_link.href = "http://test.com";
temp_link.target = '_blank';
temp_link.innerHTML ='click here';
var par = document.createElement("P");
par.innerHTML = "some text: " + temp_link.outerHTML;     
document.getElementById("main_div").appendChild(par);

这样的东西应该会让你开始：

var $p = $("<p>").text("some text:");
$p.append( 
    $("<a>").attr("href", "http://test.com")
    .attr("target", "_blank")
    .text("click me") 
);
          
$("#main_div").append( $p);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="main_div"></div>

相关文章：