【发布时间】：2018-11-09 08:56:34
【问题描述】：
我正在尝试将具有特定属性的锚标记添加到空 div，以创建一个 twitter 按钮，该按钮将发出一些自定义文本。如果我将锚标记手动添加到 html，则 twitter 按钮有效。但是，我无法弄清楚如何使用 JavaScript 添加锚标记。我尝试创建一个我想在页面加载时运行的函数。
我仍处于学习的早期阶段，所以请原谅任何明显的错误。我将不胜感激任何帮助。我正在使用 vanilla JavaScript（还没有学过 jQuery）。
CodePen 的链接如下：
HTML：
<div class="custom-tweet-button">
<!--I am trying to add the anchor tag below to the existing div when the generateTweetButton FUNCTION RUNS (i.e. when the page is loaded).
<a href="https://twitter.com/intent/tweet?text=This is some custom text"
target="_blank" alt ="Tweet this pen">
<i class="btn-icon"></i>
<span class="btn-text">Tweet</span>
</a>
-->
</div>
CSS：
.custom-tweet-button {
width: 200px;
margin: 1em auto 2em;
}
.custom-tweet-button a {
position: relative;
display: inline-block;
height: 16px;
padding: 2px;
border: 1px solid #ccc;
font-size: 11px;
color: #333;
text-decoration: none;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
font-weight: bold;
background-color: #F8F8F8;
background-image: -webkit-gradient(linear,left top,left
bottom,from(#FFF),to(#DEDEDE));
background-image: -moz-linear-gradient(top,#FFF,#DEDEDE);
background-image: -o-linear-gradient(top,#FFF,#DEDEDE);
background-image: -ms-linear-gradient(top,#FFF,#DEDEDE);
border: #CCC solid 1px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
overflow: hidden;
}
.custom-tweet-button a:hover {
border-color: #BBB;
background-color: #F8F8F8;
background-image: -webkit-gradient(linear,left top,left
bottom,from(#F8F8F8),to(#D9D9D9));
background-image: -moz-linear-gradient(top,#F8F8F8,#D9D9D9);
background-image: -o-linear-gradient(top,#F8F8F8,#D9D9D9);
background-image: -ms-linear-gradient(top,#F8F8F8,#D9D9D9);
background-image: linear-gradient(top,#F8F8F8,#D9D9D9);
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
.custom-tweet-button a .btn-icon {
position: absolute;
width: 16px;
height: 13px;
top: 50%;
left: 3px;
margin-top: -6px;
background: url('https://twitter.com/favicons/favicon.ico') 1px center no-
repeat;
background-size: 13px;
}
.custom-tweet-button a .btn-text {
display: inline-block;
padding: 2px 3px 0 20px;
}
JAVASCRIPT：
var customText = "This is some custom text";
function generateTweetButton(text) {
var tweetButton = document.getElementsByClassName("custom-tweet-button"); //grab the existing div
var anchor = document.createElement('a'); // create anchor element
anchor.setAttribute("href", "https://twitter.com/intent/tweet?text=" + encodeURIComponent(text)); //set the href url to include custom text
anchor.setAttribute("target", "_blank"); //add the target attribute
anchor.setAttribute("alt", "Tweet this pen"); //add the alt attribute
var iTag = document.createElement('i'); //create <i> tag
iTag.setAttribute("class", "btn-icon"); //give class "btn-icon" to <i> tag
var span = document.createElement("span"); // create span tag
span.setAttribute("class", "btn-text"); //give class "btn-text" to span tag
span.textContent = "Tweet"; //add "Tweet" text to span tag
anchor.appendChild(iTag); //append iTag to the anchor tag
anchor.appendChild(span); //append span tag to the anchor tag
tweetButton.appendChild(anchor); //append anchor tag to tweetButton
return tweetButton; // return the element
}
window.onload = generateTweetButton(customText); //run the function when the page loads
【问题讨论】：
标签： javascript button twitter