Question

我正在尝试将具有特定属性的锚标记添加到空div，以便创建一个Twitter按钮，该按钮将发出一些自定义文本。如果我手动将锚标记添加到html，则twitter按钮有效。但是，我无法弄清楚如何使用JavaScript添加锚标记。我尝试创建一个我想在页面加载时运行的函数。

我还处于学习的早期阶段，请原谅任何明显的错误。我非常感谢任何帮助。我正在使用vanilla JavaScript（尚未学习jQuery）。

CodePen的链接如下：

Twitter Button: 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

Answer 1

我认为这是你想要做的。问题是：document.getElementsByClassName返回具有相同类名的对象数组。您需要循环遍历它或指定要更改的对象。

＆＃13;

var customText = "This is some custom text";

function generateTweetButton(text) {

  var tweetButton = document.getElementsByClassName("custom-tweet-button")[0]; //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);

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

将自定义文本添加到推特按钮

1 个答案: