Set position of the dropdown box using . append()

Asked

Viewed 43 times

-1

Currently my dropdown box is appearing below all other elements:

inserir a descrição da imagem aqui

I wish it appeared above the button Radar 1 and the next text box.

Well, I tried to define the position as follows:

    <body style="background-color:black;">
        <div class="row">
            <div class="column left">
                <form action="" method="post" id="url-setter1">
                    <button class="button" id="botaoradar1" onclick="radarzinho1()">Radar 1</button>
                    <input type="text" name="url1" id="url1" style="width: 283px;" />
                    <iframe id="the-frame1" width="347" height="282" src=""></iframe>
                    <script src="http://d3js.org/d3.v3.js"></script>
                    <script>
                        d3.csv("Lista_de_Jogos.csv", function(error, data) {
                          var select = d3.select("#url-setter1")
                            .append("select")

But the drop-down box keeps appearing at the bottom of the page, which I must modify to make it the first element within form?

javascript html
  • 1

    one of the solutions will be to append the select and only then append the rest of the elements.

  • Good morning @Alexisgarcia, all quiet? Could you exemplify a way to do it? From what I understand you would indicate doing something like .append("ALGUMA COISA").append("select"), would that be? If yes, what could I put in place of ALGUMA COISA? 'Cause I’ve tried a few options and they didn’t turn out right.

  • 2

    put the html and css of the Divs for me to use as an example

  • Sorry for the lack of knowledge in the theme, but just to understand: do you want me to add the full script in the question? Would that be it? If yes, add without problems. Otherwise, it would be the page source code or the page Elements in the browser Dev Tools?

  • 1

    Let me give you an example

  • All right @Augustovasques, I could have edited the question demonstrating in more detail, just closing my question I am forbidden to ask for 4 days. But I will respect and I will wait the 4 days and bring a new question with more details on it! Thank you for your attention!

Show 1 more comment

1 answer

0


You can use the .insertBefore() instead of the .append();

$('button').click(
  function(){
    $('<div class="primeiro">Primeiro Elemento</div>').insertBefore('.segundo');
});
.container{
width: 300px;
height: 300px;
background-color: red;
}
button{
margin-top:20px;
}
.segundo{
margin: 20px 0;
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="segundo"> Segundo elemento</div>
<div class="terceiro">Terceiro elemento</div>
<button>Click para inserir o primeiro elemento</button>
</div>

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.