Я пытаюсь добавить тег привязки с определенными атрибутами к пустому элементу div, чтобы создать кнопку Twitter, которая будет чирикать какой-то пользовательский текст.Кнопка «Твиттер» работает, если я вручную добавляю тег привязки в HTML.Однако я не могу понять, как добавить тег привязки с помощью JavaScript.Я попытался создать функцию, которую я хотел бы запустить при загрузке страницы.
Я все еще на начальных этапах обучения, поэтому прошу прощения за любые очевидные ошибки.Я был бы очень признателен за любую помощь.Я использую ванильный JavaScript (еще не изучил jQuery).
Ссылка на CodePen ниже:
Кнопка Twitter: 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